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

smile
πŸ˜‚

HTML code:

<div class="transfbox24657">smile<br />
<span style="font-size:50px">πŸ˜‚</span>
</div>

Skew

smile
πŸ˜‚
transform:skew(20deg);

Scale

smile
πŸ˜‚
transform:scale(0.9, 1.4);

Rotate

smile
πŸ˜‚
transform:rotate(18deg);

Translate

smile
πŸ˜‚
transform:translate(110px, -20px);

β€œtranslate” in geometry means moving it to a different place.

Combined

smile
πŸ˜‚
transform:skew(20deg)
scale(0.9, 1.4)
rotate(18deg)
translate(110px, -20px);

Reference

https://www.w3.org/TR/css-transforms-1/

CSS Effects

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

Or, Buy JavaScript in Depth

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