3D Transforms & Perspective

CSS can simulate 3D depth using perspective and 3D transform functions, without needing WebGL or a graphics library.

.scene {
  perspective: 800px; /* set on the PARENT — controls how dramatic the 3D effect looks */
}

.card {
  transform: rotateY(30deg);
  transform-style: preserve-3d;
}

• perspective — set on the parent/container element, this defines the distance between the viewer and the z=0 plane. Smaller values create a more dramatic, exaggerated 3D effect; larger values create a subtler one. Without perspective set anywhere in the ancestor chain, 3D transforms on children render flat, with no visible depth.
• rotateX() / rotateY() / rotateZ() — rotate around the horizontal, vertical, or depth axis respectively (rotateZ() behaves identically to the 2D rotate()).
• translateZ() — moves an element toward or away from the viewer along the depth axis, making it appear larger (closer) or smaller (farther), when combined with perspective.
• transform-style: preserve-3d — tells child elements to maintain their own 3D positioning relative to the parent, rather than being flattened into a single 2D plane.

A classic 3D flip-card effect:

.card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  backface-visibility: hidden; /* hides the side facing away from the viewer */
}

.card-back {
  transform: rotateY(180deg); /* pre-rotated so it's upright once the card flips */
}

backface-visibility: hidden prevents the "back" of a rotated element from showing through in mirrored/reversed text during the mid-rotation — an essential detail for a convincing flip-card animation, achieved entirely with CSS and no JavaScript.