3D Perspective & Rotation
What are 3D Transforms?
Imagine holding a cardboard playing card in your hand and tilting it backward away from you, or spinning it around like a coin on a table. As it spins, the edges closer to you look larger, and the edges further away look smaller, creating a realistic sense of 3D depth.In CSS, 3D Transforms manipulate elements along three axes (X, Y, and Z). By adding the perspective property, you can create realistic 3D depth, making flat boxes look like they are floating or tilting in 3D space.
Why does it matter?
3D transforms allow you to build interactive card flips, 3D folding menus, and immersive photo carousels. They add a wow-factor to websites, creating a futuristic, tactile interface.Syntax Breakdown
transform: rotateX(60deg); — Tilts the element forward or backward along the horizontal X-axis.transform: rotateY(45deg); — Spins the element left or right along the vertical Y-axis.transform: perspective(500px) rotateY(45deg); — Defines a viewing distance of 500px, which triggers perspective rendering (making elements closer look larger).Common Mistakes
perspective value (either on the parent container using perspective: 500px; or inside the transform property itself), the rotation will look completely flat and 2D.Quick Reference
rotateX(deg) — Tilts along horizontal axis.rotateY(deg) — Tilts along vertical axis.perspective(px) — Defines visual depth viewing distance.Your Task
Set the `transform` property on the `.tilted-card` class to `rotateX(60deg)` to flip the element along the horizontal 3D axis.
index.html
Type code above to start the lesson.
Live Preview