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.

What is the CSS Transform Functions Reference?

Reference for CSS 2D and 3D transform functions including translate, rotate, scale, skew, matrix, matrix3d and perspective, with argument types, default values and compositing order notes. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Transform Functions Reference

Name: CSS Transform Functions Reference
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

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.

The right-to-left application rule in practice

The ordering rule has a concrete consequence: if you want an element to move 50px to the right relative to the screen and then rotate around its new centre, write translateX(50px) rotate(45deg). The rotation happens in the already-translated coordinate system, so the pivot stays at the element’s original screen position. Reversing to rotate(45deg) translateX(50px) first rotates the coordinate axes and then moves along the now-rotated X axis, sending the element diagonally.

2D quick reference

Function	What it does	Argument type
`translate(x, y)`	Moves along X and Y	length or %
`translateX(n)` / `translateY(n)`	Single-axis move	length or %
`rotate(a)`	Clockwise rotation	angle (deg, rad, turn)
`scale(x, y)`	Resize; % of 1 = 100%	number
`scaleX(n)` / `scaleY(n)`	Single-axis scale	number
`skewX(a)` / `skewY(a)`	Shear along one axis	angle
`matrix(a,b,c,d,e,f)`	Full 2D affine matrix	six numbers

3D functions and the perspective requirement

3D transforms only produce visible depth once a vanishing distance is set. There are two ways to supply it:

/* Method 1: perspective() in the transform list — affects this element only */
transform: perspective(600px) rotateY(45deg);

/* Method 2: perspective property on the parent — shared across all children */
.scene { perspective: 600px; }
.card  { transform: rotateY(45deg); }

Method 2 is almost always what you want for a 3D scene: all children share the same vanishing point, so they look like objects in a coherent space rather than each having its own independent projection.

For a 3D card flip the minimal recipe is:

.scene       { perspective: 800px; }
.card        { transform-style: preserve-3d; transition: transform 0.6s; }
.card:hover  { transform: rotateY(180deg); }
.front, .back { backface-visibility: hidden; }
.back        { transform: rotateY(180deg); }

transform-style: preserve-3d is what tells the browser to render child faces in 3D space rather than flattening them. Without it both faces sit on the same plane and the flip looks wrong.

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.
Prefer animating transform over top/left/width — transforms are composited on the GPU and do not trigger layout or paint, keeping animations smooth at 60fps.
The rotate3d(x, y, z, angle) form specifies a vector to rotate around: for example rotate3d(1, 1, 0, 45deg) rotates around the diagonal XY axis.