Chapter 58: 3D transforms

Core Idea

A practical guide to CSS 3D transforms: the z axis, the perspective property vs the perspective() function, rotateX and rotateY, backface-visibility, transform-style: preserve-3d, and animating all of it with Motion.

Key Concepts

• The three axes: CSS coordinates are slightly different from the graph paper you might remember from school.
• Rotations: Rotating using a CSS rotate function will rotate an element in the intuitive way
• Perspective: Without perspective
• perspective vs perspective(): There are two ways to add perspective
• Moving the camera: perspective-origin moves the vanishing point.
• Building a card flip: With a perspective camera in place
• Forced flattening: Unfortunately
• Animating 3D with Motion: Unlike CSS
• Performance: 3D transforms

Code Examples

.scene {
  perspective: 800px;
}

• What it demonstrates: Core usage pattern for 3D transforms.

Key Takeaways

1. 3D transforms supports The three axes.
2. 3D transforms supports Rotations.
3. 3D transforms supports Perspective.

Connects To

• animate(): related Motion doc page.
• Tween: related Motion doc page.
• Animation performance guide: related Motion doc page.
• hover(): related Motion doc page.
• Tilt card example & tutorial for JavaScript: related Motion doc page.