CSS: Transform

By Xah Lee. Date: . Last updated: .

What is CSS transform

Original

XYZ

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.

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

Scale

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

Rotate

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

Skew

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

Combined

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

CSS, Transform, Animation