CSS: 2D Transform

By Xah Lee. Date: . Last updated: .

CSS transform lets you apply a geometric transformation on html element. For example, rotate, scale, reposition.

Original

XYZ

HTML code:

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

Skew

XYZ
transform:skew(20deg);

Scale

XYZ
transform:scale(0.9, 1.4);

Rotate

XYZ
transform:rotate(18deg);

Translate

XYZ
transform:translate(110px, -20px);

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

Combined

XYZ
transform:skew(20deg)
scale(0.9, 1.4)
rotate(18deg)
translate(110px, -20px);

Transform/Animation