CSS — 3D Transforms

From flat to dimensional

3D transforms add the Z axis (toward/away from viewer):

.cube-face {
    transform: rotateY(45deg);      /* spin around vertical axis */
    transform: rotateX(45deg);      /* tilt like a laptop screen */
    transform: rotateZ(45deg);      /* same as 2D rotate         */
    transform: translateZ(50px);    /* pop toward viewer         */
}

perspective — where depth comes from

Without a vanishing point, Z movement is invisible:

.scene {
    perspective: 800px;     /* smaller = more dramatic depth */
}

.scene .card {
    transform: rotateY(30deg);
}

Put perspective on the PARENT; children inherit the 3D stage. Or per-element: transform: perspective(600px) rotateY(30deg).

The flip card — classic pattern

<div class="flip">
    <div class="inner">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
    </div>
</div>

.flip       { perspective: 1000px; }
.inner {
    position: relative;
    transform-style: preserve-3d;      /* children share the 3D space */
    transition: transform 0.6s;
}
.face { backface-visibility: hidden; } /* hide the reversed side */

.back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
}

.flip:hover .inner { transform: rotateY(180deg); }

(Hover spins the card 180° revealing its back face.)

Two properties make it work:

Property	Job
transform-style: preserve-3d	children keep real 3D positions instead of flattening
backface-visibility: hidden	each face invisible when turned away

translateZ — parallax layers

.scene { perspective: 500px; }

.bg   { transform: translateZ(-100px); }  /* recedes = moves slower  */
.card { transform: translateZ(0); }
.fg   { transform: translateZ(60px); }    /* closer = moves faster   */

Combined with scroll or mousemove, layered Z depths produce parallax depth.

Tilt-on-hover effect

card.addEventListener("mousemove", e => {
    const r = card.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width - 0.5;
    const y = (e.clientY - r.top) / r.height - 0.5;
    card.style.transform =
        `perspective(600px) rotateX(${ -y * 10 }deg) rotateY(${ x * 10 }deg)`;
});
card.addEventListener("mouseleave", () => card.style.transform = "");

(The card tilts toward your cursor — product-card staple.)

Pitfalls: 3D transforms create stacking contexts and containing blocks (fixed-position traps); Safari needs -webkit- prefixes occasionally; heavy preserve-3d scenes can cost battery.

Mini Practice

1. Build the flip card from scratch.
2. Perspective lab: one box at 200/800/2000px — feel focal length.
3. Three-layer parallax scene with translateZ.
4. Mouse-tilt product card via the JS snippet.
5. Rotating cube: six faces with rotateX/Y + translateZ(half-size).

Next: animations →