CSS: 2D Transform

By Xah Lee. Date: . Last updated: .

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

Reference

CSS Effects

  1. CSS: Round Corners, border-radius
  2. CSS: Box Shadow
  3. CSS: Text Shadow/Outline
  4. CSS Triangle, CSS Shapes
  5. CSS: 2D Transform
  6. CSS: Image Rollover
  7. CSS: Background Image, CSS Sprites Tutorial
  8. CSS: Transition Tutorial
  9. CSS: Animation Tutorial
Like what you read? Buy JavaScript in Depth