Transforms

Exercises in transforms and transform-origin.

  • Click a box to trigger a css transform.
  • Click and hold to set transform-origin.

Bundling a couple examples into this page—both CSS transforms and how the CSS property transform-origin affects them.

rotate
skewX
skewY
scaleX
scaleY
scale
translateX
translateY
translate

Unlike translate and scale, there is no longer a skew property taking both X and Y lengths.

Translate moves the element as a whole; transform-origin does not affect it. You can still set the origin point in the demo, but it won’t afffect the outcome.