In what order do chained transform functions apply?

They are applied right to left in effect. transform: translateX(50px) rotate(45deg) first rotates the element, then translates the rotated coordinate system. Reordering the same functions produces a different result, so order is significant.

Why is my 3D transform flat?

3D rotations and translateZ need a perspective to be visible. Add perspective() before the 3D functions in the same transform list, or set the perspective property on the parent element. Without it, depth has no visual effect.

What does the matrix() function do?

matrix(a, b, c, d, e, f) packs an entire 2D affine transform into one call: a and d scale, b and c handle skew and rotation, and e and f translate. Browsers compute it internally for every transform; you rarely write it by hand but may see it in computed styles.

Are percentages allowed in translate()?

Yes for translate, translateX and translateY in 2D, where percentages resolve against the element's own width or height. translateZ requires a length unit, because there is no box dimension along the Z axis to be a percentage of.

Should I animate transform instead of top and left?

Yes. transform is GPU-composited and does not trigger layout, so animating it is far smoother than animating top, left, width or height, which force reflow and repaint on each frame.

CSS Transform Functions Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

Moving, turning and reshaping boxes

The CSS transform property accepts a space-separated list of transform functions that move, rotate, scale, skew or matrix-compose an element without disturbing document flow. This reference lists every function in both 2D and 3D, with its syntax, argument types, defaults and the practical notes that trip people up.

How it works

Transforms operate around the transform-origin (the element centre by default) and are applied right to left: the last function in the list runs first on the element, then each preceding function transforms the already-transformed coordinate space. That is why translate() rotate() and rotate() translate() look different.

2D functions live in the screen plane. 3D functions add depth: translateZ, rotateX/Y, rotate3d, scaleZ and matrix3d only show their effect once a perspective establishes a vanishing distance — either via the perspective() function placed first in the list or the perspective property on the ancestor. Internally the browser collapses any chain into a single matrix, which is what you see when you read computed styles. Filter the list above by name or dimension.

Tips and examples

A flip is just a negative scale: scaleX(-1) mirrors horizontally, scale(-1) mirrors both axes.
translate3d(0,0,0) is a common way to promote an element to its own GPU layer for smoother animation, though will-change: transform is the explicit hint.
For 3D card flips, set perspective on the container, transform-style: preserve-3d on the rotating element, and backface-visibility: hidden on the faces.
Smaller perspective() distances exaggerate the 3D effect; large values flatten it.