CSS: Animating 3D Transforms

A HTML and CSS component showcasing animated 2D to 3D layer transformations.

HTML Example

1<div class="t3d-viewport">
2  <div class="t3d-scene">
3    <div class="t3d-layer" data-depth="1">Content 1</div>
4    <div class="t3d-layer" data-depth="2">Content 2</div>
5    <div class="t3d-layer" data-depth="3">Content 3</div>
6  </div>
7</div>

Activation

Trigger the 3D transformation by adding the is-3d class:

1// Activate 3D mode
2document.querySelector(".t3d-viewport").classList.add("is-3d");
3
4// Deactivate (return to 2D)
5document.querySelector(".t3d-viewport").classList.remove("is-3d");

Customization

1:root {
2  --t3d-duration: 5s; /* Animation duration */
3  --t3d-scene-distance: -200px; /* Scene depth positioning */
4  --t3d-scene-tilt: 71deg; /* Downward tilt angle */
5  --t3d-scene-rotation: -10deg; /* Left/right rotation */
6  --t3d-scene-skew: 60deg; /* Diagonal orientation */
7  --t3d-layer-base: 20px; /* First layer depth */
8  --t3d-layer-increment: 30px; /* Depth between layers */
9}

Complete Example

 1<div class="card-stack">
 2  <div class="t3d-viewport">
 3    <div class="t3d-scene">
 4      <div class="t3d-layer" data-depth="1">
 5        <h3>Back Card</h3>
 6        <p>This appears furthest from the viewer</p>
 7      </div>
 8      <div class="t3d-layer" data-depth="2">
 9        <h3>Middle Card</h3>
10        <p>This is positioned behind the front card</p>
11      </div>
12      <div class="t3d-layer" data-depth="3">
13        <h3>Front Card</h3>
14        <p>This appears closest to the viewer</p>
15      </div>
16    </div>
17  </div>
18  <button onclick="toggleTransform()">Toggle 3D</button>
19</div>
20
21<script>
22  function toggleTransform() {
23    const viewport = document.querySelector(".t3d-viewport");
24    viewport.classList.toggle("is-3d");
25  }
26</script>

How It Works

1. Establishing 3D Context

The .t3d-viewport establishes perspective with perspective: 1200px. This defines the viewing distance and determines how strongly 3D transforms affect depth perception. Smaller values create more dramatic perspective effects.

2. Preserving 3D Space

Both .t3d-scene and .t3d-layer use transform-style: preserve-3d. This is critical - it ensures child elements maintain their 3D position in the transformed space rather than being flattened to the parent’s plane.

3. Scene Transform

When .is-3d is added, the scene applies a composite transform:

• translateZ(-200px) - Pushes the entire scene towards the viewer
• rotateX(71deg) - Tilts the scene downward, revealing the layer stack
• rotateY(-10deg) - Rotates the scene left, adding a slight angle
• rotateZ(60deg) - Skews the scene diagonally for visual interest

These transforms are applied in order, creating a viewing angle that showcases the depth separation between layers.

4. Layer Depth Positioning

Each layer uses translateZ() to position itself along the Z-axis:

• Layer 1: translateZ(20px) - Furthest from viewer
• Layer 2: translateZ(50px) - 30px in front of layer 1
• Layer 3: translateZ(80px) - 30px in front of layer 2
• Layer 4: translateZ(110px) - 30px in front of layer 3

The formula is: Z = base + (depth - 1) × increment, where base = 20px and increment = 30px.

5. Animation Timeline

The animation uses transition: transform 5s cubic-bezier(0.4, 0, 0.2, 1). This creates a smooth, 5-second eased transition between states:

• 2D State: All layers overlap at translateZ(0), scene has no rotation
• Transition: The cubic-bezier easing provides natural acceleration and deceleration
• 3D State: Scene rotates and layers separate along the Z-axis, revealing the stack

6. Transform Order Matters

The order of transforms is significant. The scene transform translateZ → rotateX → rotateY → rotateZ applies transformations in sequence, with each affecting the coordinate system for the next. Changing the order produces different visual results.

Key Technical Points

• backface-visibility: hidden hides the reverse side of layers during rotation
• position: absolute on layers allows them to stack in 2D initially
• The cubic-bezier easing curve creates natural-like motion
• Animation respects prefers-reduced-motion accessibility setting