Page 33 - CSS

CSS

.scale {
width: 100px;
height: 100px;
background: teal;
transform: scale(0.5, 1.3);
}

This example will scale the div to 100px * 0.5 = 50px on the X axis and to 100px * 1.3 = 130px on
the Y axis.

The center of the transform is in the center of the div, 50% from left and 50% from top.

Translate

HTML

<div class="translate"></div>

CSS

.translate {
width: 100px;
height: 100px;
background: teal;
transform: translate(200px, 50%);
}

This example will move the div by 200px on the X axis and by 100px * 50% = 50px on the Y axis.

You can also specify translations on a single axis.

On the X axis:

.translate {
transform: translateX(200px);
}

On the Y axis:

.translate {
transform: translateY(50%);
}

Skew

HTML

<div class="skew"></div>

https://riptutorial.com/ 11