3D Text Perspective Effect with CSS rotateX

3D Text with rotateX and Perspective

Applying rotateX with perspective to text creates a dramatic 3D vanishing-point effect where the text appears to recede into the distance.

The CSS

.perspective-text-container {
  perspective: 400px;
}

.perspective-text {
  transform: rotateX(30deg);
  transform-origin: bottom center;
}

Effect Variations

Receding upward — The bottom edge is closer, top recedes:

.recede-up {
  transform: rotateX(25deg);
  transform-origin: bottom center;
}

Receding downward — The top edge is closer, bottom recedes:

.recede-down {
  transform: rotateX(-25deg);
  transform-origin: top center;
}

Side perspective — Text tilts to one side:

.side-tilt {
  transform: rotateY(15deg);
  transform-origin: left center;
}

Combining with Text Shadow

A text shadow that follows the perspective angle enhances the 3D illusion:

.perspective-text {
  transform: rotateX(30deg);
  text-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

Readability

Keep rotation angles moderate (under 35 degrees) for heading text. For body text, use very subtle angles (under 10 degrees) or avoid perspective entirely. The effect works best on large, bold headings.