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