Loading…
Loading…
Visual 2D/3D transform editor — stack, reorder, and preview CSS transforms in real-time.
center
transform: rotateZ(0deg) scaleX(1) scaleY(1);
(no matching classes)
rotateZ(0deg) scaleX(1) scaleY(1)
Common questions about the CSS Transform Generator.
CSS transform supports translate (move), rotate, scale (resize), skew (slant), and perspective (3D depth). You can combine multiple transforms in a single transform property, and they execute right-to-left. Modern CSS also supports individual transform properties like translate, rotate, and scale.
Transform order matters — transforms are applied right-to-left. 'rotate(45deg) translateX(100px)' moves first then rotates, which is different from 'translateX(100px) rotate(45deg)'. Also check your transform-origin, which defaults to the element's center.
No — transforms are purely visual and don't affect document flow. A transformed element still occupies its original space in the layout. This makes transforms ideal for animations since they don't trigger layout recalculations (reflows), only compositing — which is GPU-accelerated and very performant.
Add perspective to the parent element (e.g. perspective: 800px) and use 3D transform functions like rotateX(), rotateY(), rotateZ(), translateZ(), or rotate3d(). Set transform-style: preserve-3d on containers to allow nested 3D transforms.