CSS 3D Transforms - Reference

What are 3D Transforms?

3D transforms extend 2D transforms into the third dimension, adding depth to your elements. You can rotate, translate, and scale along the Z-axis, creating perspective effects and realistic 3D animations.

Key Concept: Requires setting up perspective to see the 3D effect properly.

perspective

Creates the illusion of depth by defining how far the viewer is from the element.

.parent { perspective: 1000px; }

Applied to parent: Sets perspective for child elements

Lower values: More dramatic perspective (closer view)

Higher values: Subtler perspective (distant view)

Typical range: 500px-2000px

rotateX(), rotateY(), rotateZ()

Rotates elements around the X, Y, or Z axis.

                transform: rotateX(45deg);

                transform: rotateY(45deg);

                transform: rotateZ(45deg);

rotateX: Flips top/bottom (horizontal axis)

rotateY: Flips left/right (vertical axis)

rotateZ: Same as 2D rotate (depth axis)

translateZ()

Moves elements closer or further from the viewer.

transform: translateZ(100px);

Positive values: Move toward viewer (larger appearance)

Negative values: Move away from viewer (smaller appearance)

Use with perspective: Create depth effects

transform-style

Determines whether children render in 3D space or are flattened.

.parent { transform-style: preserve-3d; }

preserve-3d: Children maintain their 3D positions

flat (default): Children are flattened to the parent's plane

Essential for: Nested 3D elements like card flips or cubes

backface-visibility

Controls whether the back of a rotated element is visible.

backface-visibility: hidden;

visible (default): Back face is visible (mirrored)

hidden: Back face is invisible

Common use: Card flip effects where you don't want the back showing through

3D Cube Example Pattern

Common setup for creating 3D objects like cubes.

                .container { perspective: 1000px; }

                .cube { transform-style: preserve-3d; }

                .face { position: absolute; }

                .front { transform: translateZ(50px); }

                .back { transform: rotateY(180deg) translateZ(50px); }

Pattern: Container with perspective, parent with preserve-3d, faces with specific transforms