CSS 2D Transform Tutorial

By Xah Lee. Date:

This page shows examples of CSS's 2D transform.

Original

smile

HTML code:

<div class="transfbox24657">smile<br /><span style="font-size:6ex">☺</span></div>

Skew

smile

CSS code:

transform:skew(20deg);

Scale

smile

CSS code:

transform:scale(0.9, 1.4);

Rotate

smile

CSS code:

transform:rotate(18deg);

Translate

smile

CSS code:

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

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

Combined

smile

CSS code:

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

as of , it works in Firefox, but not Google Chrome. You may need to use one of the following:

-ms-transform
-moz-transform
-webkit-transform
-o-transform

Reference

Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.