CSS: 2D Transform

By Xah Lee. Date: 2013-04-01. Last updated: 2018-06-25.

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

XYZ

HTML code:

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

XYZ

transform:skew(20deg);

XYZ

transform:scale(0.9, 1.4);

XYZ

transform:rotate(18deg);

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