CSS: Transform

What is CSS transform

CSS transform lets you apply a geometric transformation on HTML element. e.g. translate, rotate, scale.

transform changes the rendering, after all other CSS properties (e.g. margin, padding, width, height, etc.) are calculated.

transform does not effect rest element's layout.

Original

Code

<div class="orig794">XYZ</div>

div.orig794 {
 font-size: 2rem;
 border: solid 2px red;
 width: 100px;
}

Translate

“translate” in geometry means moving it to a different place.

div.tsl090 {
 font-size: 2rem;
 border: solid 2px red;
 width: 100px;
 transform: translate(110px, -20px);
}

Scale

div.scl439 {
 font-size: 2rem;
 border: solid 2px red;
 width: 100px;
 transform: scale(0.5, 2);
}

Rotate

div.rot270 {
 font-size: 2rem;
 border: solid 2px red;
 width: 100px;
 transform: rotate(18deg);
}

Skew

div.ske36c7 {
 font-size: 2rem;
 border: solid 2px red;
 width: 100px;
 transform: skew(20deg);
}

Combined

div.combo1a22 {
 font-size: 2rem;
 border: solid 2px red;
 width: 100px;
 transform: skew(20deg) scale(0.9, 1.4) rotate(18deg) translate(110px, -20px);
}