3D Transforms and perspective

Moving Beyond a Flat Plane

2D transforms move, scale and rotate an element flat against the screen. 3D transforms add a Z axis, letting an element rotate or move as if it existed in actual three-dimensional space.

Why perspective Is Required First

.scene {
  perspective: 800px;
}
.card {
  transform: rotateY(25deg);
}

Without a perspective value set on a parent (or on the element itself via transform: perspective(800px) rotateY(25deg)), 3D rotations render with no sense of depth - perspective is what tells the browser how strong the 3D effect should look, similar to how close a camera is to the scene. A smaller value creates a more dramatic, exaggerated depth effect; a larger value creates a subtler one.

Rotating Around Each Axis

A Classic Use: A Flip Card

.card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.card:hover .card-inner {
  transform: rotateY(180deg);
}
.card-back {
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

transform-style: preserve-3d is what allows child elements to keep their own 3D positioning rather than being flattened into the parent's 2D plane, and backface-visibility: hidden hides the reverse side of an element once it has rotated past 90 degrees.