3D CSS Transforms

3D transforms extend CSS 2D transformations into three dimensions, enabling elements to appear closer or farther away and rotate along multiple axes.

Common 3D transform functions:

1. perspective() – sets the distance between the viewer and the object.
2. rotate3d() – rotates an element in 3D space along X, Y, and Z axes.
3. Additional 3D transforms include translateZ(), scaleZ(), and rotateX()/rotateY()/rotateZ().

Perspective – Creating Depth

The perspective() property determines how far an object is from the viewer, simulating depth.

Syntax:

transform: perspective(value) rotateX(angle) rotateY(angle);

Example:

The .perspective-container sets a depth of 600px, making the box appear 3D when rotated along X and Y axes. Hovering returns it to the flat position.

<div class="perspective-container">
  <div class="box perspective-box">3D Perspective</div>
</div>

.perspective-container {
  perspective: 600px; /* How far the viewer is */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f1f2f6;
}

.perspective-box {
  width: 150px;
  height: 150px;
  background-color: #ff6b6b;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  border-radius: 10px;
  transform: rotateX(30deg) rotateY(30deg);
  transition: transform 0.4s ease;
}

.perspective-box:hover {
  transform: rotateX(0deg) rotateY(0deg);
  cursor: pointer;
}

Output :

rotate3d – Rotate Elements in 3D

The rotate3d() function allows rotation along any combination of X, Y, and Z axes.

Syntax:

• x → 1 to rotate along X-axis (0 = no rotation)
• y → 1 to rotate along Y-axis
• z → 1 to rotate along Z-axis
• angle → rotation in degrees

transform: rotate3d(x, y, z, angle);

Example:

• The element initially rotates 45 degrees diagonally along X and Y axes.
• On hover, it spins 360 degrees along the Z-axis, creating a dynamic 3D effect.

<div class="box rotate3d-box">3D Rotate</div>

.rotate3d-box {
  width: 150px;
  height: 150px;
  background-color: #1dd1a1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  border-radius: 10px;
  transform: rotate3d(1, 1, 0, 45deg); /* Rotate diagonally in 3D */
  transition: transform 0.4s ease;
}

.rotate3d-box:hover {
  transform: rotate3d(0, 0, 1, 360deg); /* Spin on Z-axis on hover */
}

Output :

Interactive 3D Card Example

You can combine perspective and rotate3d to create interactive 3D cards.

• The .card-container provides the 3D perspective.
• The .card rotates along multiple axes, flipping and changing color when hovered.

<div class="card-container">
  <div class="card">Hover Me</div>
</div>

.card-container {
  perspective: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f1f2f6;
}

.card {
  width: 200px;
  height: 200px;
  background-color: #54a0ff;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border-radius: 15px;
  transform: rotate3d(0.5, 1, 0, 20deg);
  transition: transform 0.5s ease, background-color 0.3s ease;
}

.card:hover {
  transform: rotate3d(0, 1, 0, 180deg); /* Flip along Y-axis */
  background-color: #5f27cd;
  cursor: pointer;
}

Output :