CSS: 2D Transform
What is CSS transform
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);