Question 1

What CSS transform functions are available?

Accepted Answer

The main transform functions are: translate(x,y) moves the element, rotate(deg) rotates it, scale(x,y) resizes it, skew(x,y) tilts it, and matrix() applies a 2D matrix transformation. 3D variants include translateZ(), rotateX(), rotateY(), rotateZ(), perspective(), and scaleZ().

Question 2

Does CSS transform affect document layout?

Accepted Answer

No — transform moves or resizes the element visually without affecting document flow. Other elements don't shift to accommodate the transformation. This is why transform is preferred for animations: it only triggers compositing, not layout recalculation.

Question 3

What is transform-origin?

Accepted Answer

transform-origin sets the point around which transformations are applied. Default is center center (50% 50%). Setting transform-origin: top left makes rotations pivot from the top-left corner. Setting transform-origin: center bottom makes scale grow from the bottom.

CSS Transform Generator

Live Preview

Generated CSS

Related Tools