CSS 3D Transforms

CSS 3D transforms allow you to manipulate elements in three-dimensional space. In addition to moving along the X-axis (horizontal) and Y-axis (vertical), you can now move, rotate, and scale elements along the Z-axis (depth, i.e., towards or away from the viewer).

perspective Property

To activate 3D space, you need to set the perspective property on the parent container. This property defines the distance of the 3D element from the viewer, which determines the intensity of the 3D effect.

• Smaller values create a stronger perspective effect, looking more exaggerated.
• Larger values create a milder perspective effect.

.container {
  perspective: 1000px;
}

3D Transform Functions

translate3d(x, y, z) and translateZ(z)

translateZ() moves an element along the Z-axis. Positive values move it closer to the viewer (making it appear larger), and negative values move it further away (making it appear smaller).

.box {
  transform: translateZ(100px);
}

rotate3d(x, y, z, angle)

This function allows you to rotate around a custom 3D vector. More commonly used are its shorthand forms:

• rotateX(angle): Rotates around the X-axis. Imagine a rotisserie skewer passing horizontally through the center of the element.
• rotateY(angle): Rotates around the Y-axis. Imagine a rotisserie skewer passing vertically through the center of the element.
• rotateZ(angle): Rotates around the Z-axis. This is the same as the 2D rotate().

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

scale3d(x, y, z) and scaleZ(z)

scaleZ() scales an element along the Z-axis. This affects the thickness of the element in 3D space, but you might not see a visible effect without other 3D transformations.

transform-style: preserve-3d

When you have a nested 3D structure (e.g., a cube where each face is a div), you need to set transform-style: preserve-3d; on their direct parent container.

This tells the browser that the child elements should also exist in the same 3D space, rather than being "flattened" onto the parent's plane.

.cube {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(45deg);
}

.cube-face {
  position: absolute;
  /* ...each face has its own rotation and translation to form a cube... */
}

backface-visibility

When an element is rotated so that its back faces the viewer, the backface-visibility property controls whether it is visible.

• visible: (Default) The back face is visible (usually a mirror image of the front).
• hidden: The back face is invisible.

This is very useful when creating effects like flipping cards.

.card-inner {
  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);
}

3D transforms are one of the most complex but also most powerful visual tools in CSS, opening up new possibilities for web interaction design.