CSS Transforms — 2D & 3D

Drag sliders to build a transform string, compare function order side-by-side, flip a 3D card, and see why transform beats top/left on the compositor.

Transform Sandbox

Adjust translate, scale, rotate, and skew. Change transform-origin to move the pivot — the red dot marks the origin corner.

translateX 0px

translateY 0px

scale 1

rotate 0deg

skewX 0deg

origin

BOX

Live transform

transform: none;

transform-origin: center center;

Order Matters

Transform functions apply right-to-left. Same values, different order — completely different result.

translateX: 60px rotate: 45deg

A — rotate then translate

CSS order (right → left) translateX(60px) rotate(45deg)

B — translate then rotate

CSS order (right → left) rotate(45deg) translateX(60px)

Matrix multiplication is not commutative — always think about which operation runs on the element's local axes first.

3D — Perspective & preserve-3d

perspective on a parent, transform-style: preserve-3d on the scene, backface-visibility: hidden on faces.

Card flip

FRONT

BACK

perspective 800px

3D cube

rotateX -18deg

rotateY 32deg

perspective 600px

Compositor vs Layout

transform runs on the GPU compositor thread — no reflow. top/left triggers layout every frame.

Compositor-friendly

Animating transform: translateX()

Layout-triggering

Animating left (same visual motion)

In DevTools Performance panel, the layout animation shows purple "Layout" blocks every frame. The transform animation stays on "Composite Layers". Prefer transform and opacity for motion.