CSS - Transforms (2D/3D)

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 12–18 minutes

Transforms move and shape elements in 2D/3D space. They’re performant and ideal for interactive UI.

Learning Objectives

• Compose multiple transforms and control origins.
• Introduce perspective for 3D depth.

Details & Examples

.card:hover{ transform: translateY(-2px) scale(1.01); }
.scene{ perspective: 800px; }
.box{ transform: rotateY(30deg); transform-style: preserve-3d; }

Try it

Checks for Understanding

1. Which properties are most performant to animate?

Exercises

1. Build a 3D flip card using transform-style: preserve-3d and perspective. Ensure backface visibility is handled.
2. Create a hover effect that lifts and scales a card subtly using transforms only.