3D Transforms

CSS transforms are not limited to two dimensions. You can rotate, translate, and scale elements in 3D space. This opens up possibilities for card flips, cube animations, and perspective effects that make designs feel truly three-dimensional.

Perspective

Before you can see 3D effects, you need to set perspective on the parent element. Perspective determines how dramatic the 3D effect looks. A lower value means stronger perspective, a higher value means milder.

.scene {
  perspective: 1000px;
}

.card {
  transform: rotateY(30deg);
}
    

Think of perspective as the distance from the viewer to the Z plane. A value of 1000px is a good starting point — it gives a natural 3D feel without being too extreme.

3D Rotation Axes

In 2D you rotate with rotate(). In 3D, you have three axes: rotateX() (horizontal tilt), rotateY() (vertical spin), and rotateZ() (same as 2D rotation).

.tilt-forward {
  transform: rotateX(20deg);
}

.spin-vertical {
  transform: rotateY(45deg);
}

.flat-rotate {
  transform: rotateZ(15deg);
}
    

You can combine all three in a single transform: rotateX(10deg) rotateY(20deg) rotateZ(5deg). The order matters, so experiment with different combinations.

Card Flip Effect

One of the most popular 3D effects is the card flip. You need two sides (front and back), backface-visibility: hidden, and a Y-axis rotation.

.card {
  position: relative;
  perspective: 1000px;
  width: 200px;
  height: 300px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

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

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

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

The key is transform-style: preserve-3d on the container and backface-visibility: hidden on both sides. The back side is pre-rotated 180 degrees so it starts hidden, and the hover flips the inner container to reveal it.

translateZ for Depth

translateZ() moves an element toward or away from the viewer. Positive values bring it closer (appears larger), negative values push it away (appears smaller). This only works when perspective is set on a parent.

.pop-out {
  transform: translateZ(50px);
}

.push-back {
  transform: translateZ(-100px);
}
    

Use translateZ to create layered effects where elements appear to float at different depths. It pairs well with transform-style: preserve-3d for complex multi-layer compositions.