CSS 3D Transforms

3D Transforms

CSS 3D transforms allow you to rotate and move elements in 3D space. This is commonly used for card flips, 3D hover effects, and interactive UI.

3D transforms are applied using the transform property, just like 2D transforms, but with 3D functions such as:

• translateZ()
• rotateX(), rotateY(), rotateZ()
• scaleZ()

To preserve 3D space for child elements, use transform-style: preserve-3d on the parent.

.scene {
  transform-style: preserve-3d;
}

Tip: 3D transforms are most noticeable when combined with perspective (explained below).

3D Transform Rotate

3D rotation uses axes:

• X-axis – rotates up/down (like nodding)
• Y-axis – rotates left/right (like turning your head)
• Z-axis – rotates in the plane (similar to 2D rotate)

.rotate-x {
  transform: rotateX(45deg);
}

.rotate-y {
  transform: rotateY(45deg);
}

.rotate-z {
  transform: rotateZ(20deg);
}

Card flip pattern (common use case):

.card {
  transition: transform .4s ease;
  transform-style: preserve-3d;
}

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

For real card flips with front/back faces, you typically also use backface-visibility on each side.

.face {
  backface-visibility: hidden;
}

3D Transform Perspective

perspective creates depth. Without perspective, 3D rotations often look flat.

You can apply perspective in two ways:

• perspective property on a parent (recommended for scenes)
• perspective() function inside transform

Perspective on the parent:

.scene {
  perspective: 800px;
}

.box {
  transform: rotateY(35deg);
}

Perspective inside transform:

.box {
  transform: perspective(800px) rotateY(35deg);
}

The smaller the perspective value, the stronger the 3D effect. Larger values produce a subtler effect.

You can also change the viewer position using perspective-origin:

.scene {
  perspective: 800px;
  perspective-origin: left center;
}

Summary

• 3D transforms rotate/move elements on X/Y/Z axes.
• Use transform-style: preserve-3d when working with 3D child elements.
• Use perspective to create depth; smaller values increase the effect.
• backface-visibility is useful for flip-card effects.