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.

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);
}