CSS: 2D Transform

By Xah Lee. Date: . Last updated: .

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

CSS Effects

  1. Round Corners
  2. Box Shadow
  3. Text Shadow
  4. 2D Transform
  5. Image Rollover
  6. Background Image
  7. Transition
  8. Animation
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog