3D Transforms & Perspective

3D Transforms & Perspective

Rotate elements in three dimensions for that "wow" tilt!

rotateX / rotateY / rotateZ

.card {
  transform: rotateY(45deg);   /* swing like a door */
  transform: rotateX(30deg);   /* tip forward/back */
  transform: rotateZ(90deg);   /* spin on screen plane */
}

perspective

3D needs a viewing distance. Put perspective on the PARENT:

.scene {
  perspective: 600px;   /* how far away the viewer is */
}
.card {
  transform: rotateY(45deg);
}

perspective() on the element itself

When no parent is available:

.card {
  transform: perspective(600px) rotateY(45deg);
}

translateZ and scaleZ

Move/scale along the depth axis. Positive translateZ pops elements toward you!

.card {
  transform: perspective(600px) translateZ(50px);
}

transform-style: preserve-3d

To let CHILDREN keep their 3D position relative to the parent:

.parent {
  transform-style: preserve-3d;
}
.child {
  transform: rotateY(50deg) translateZ(40px);
}

backface-visibility

Hide the back of an element when flipped (great for card flip effects!):

.card {
  backface-visibility: hidden;
}

TL;DR

• rotateX/Y/Z, translateZ, scaleZ, the 3D transforms.
• perspective (parent) = viewing distance.
• transform-style: preserve-3d for 3D children.
• backface-visibility: hidden for card flips.
• SVG-like wow without JS.