CSS 3D Transforms: perspective, preserve-3d, rotateX/Y and backface-visibility

What are CSS 3D transforms?

CSS 3D transforms extend the 2D transform system with a third axis (Z), so elements can rotate in depth, move toward or away from the viewer and form real 3D objects like cards and cubes. With only CSS you can create flip cards, tilt effects, carousels, 3D buttons and product showcases.

Focus keyword: CSS 3D transforms. Related trending keywords: CSS perspective, transform-style preserve-3d, CSS flip card, CSS 3D cube, backface-visibility hidden, 3D card tilt effect, rotateY hover animation.

The three axes

• X axis: horizontal (left to right). rotateX() tilts the element forward or backward like a laptop lid.
• Y axis: vertical (top to bottom). rotateY() turns the element like a revolving door.
• Z axis: depth (toward or away from you). translateZ() moves it closer or farther, and rotateZ() is the same as 2D rotate().

3D transform functions

• rotateX(a), rotateY(a), rotateZ(a), rotate3d(x, y, z, a)
• translateZ(d), translate3d(x, y, z)
• scaleZ(n), scale3d(x, y, z)
• perspective(d): a function that applies perspective to a single element
• matrix3d(...): 16 values that define any 3D transform

perspective: the key to depth

Without perspective, 3D rotation looks flat. The perspective property goes on the parent and sets how far the viewer is from the scene. Smaller values (like 300px) give a dramatic, strong effect. Larger values (like 1200px) give a subtle, natural look. The perspective-origin property moves the vanishing point (default 50% 50%).

Alternative: use transform: perspective(600px) rotateY(30deg) on the element itself. This is quick for single elements, but for groups of children the parent perspective property gives them a shared vanishing point.

transform-style: preserve-3d

By default, children are flattened into the parent's plane. Setting transform-style: preserve-3d on the parent keeps children in true 3D space, which is required for cubes, carousels and flip cards with front and back faces. Note: some properties on the same element force flattening back to flat, including overflow (other than visible), opacity below 1, filter, clip-path, mask and mix-blend-mode. If your 3D scene collapses, check these first.

backface-visibility

When an element rotates past 90 degrees, you see its back. backface-visibility: hidden hides the back side, which is the standard trick for a flip card: two faces stacked together, the back one pre-rotated 180 degrees.

Common pattern: flip card

1) Wrapper with perspective. 2) Inner element with transform-style: preserve-3d and a transition. 3) Front and back faces absolutely positioned with backface-visibility: hidden. 4) Back face rotated rotateY(180deg). 5) On hover or focus, inner rotates 180 degrees.

Performance and accessibility tips

• 3D transforms are usually GPU accelerated, but many large 3D layers use memory. Keep scenes small.
• Do not hide essential content on the back of a card that only appears on hover. Touch and keyboard users need a way to flip it (use :focus-within or a button) and screen readers need readable text.
• Wrap heavy motion in @media (prefers-reduced-motion: no-preference).
• Test text sharpness. Rotated text can look blurry on some displays.

Quick summary

To build with CSS 3D transforms: add perspective to the parent, use transform-style: preserve-3d for nested 3D, transform children with rotate and translateZ, and hide backs with backface-visibility.