CSS Perspective Tilt Effect on Hover

Perspective Tilt Effect

A perspective tilt gives elements a 3D parallax-like feel that can follow the cursor. Even without JavaScript for mouse tracking, you can create a compelling tilt with pure CSS hover states.

The CSS

.tilt-container {
  perspective: 600px;
}

.tilt-card {
  transition: transform 0.3s ease;
}

.tilt-card:hover {
  transform: rotateX(10deg) rotateY(-10deg);
}

How Perspective Creates Depth

The perspective property on the parent defines the distance between the viewer and the z=0 plane. It affects how pronounced the 3D rotation appears:

Perspective	Result
200px	Very dramatic, extreme foreshortening
600px	Balanced, natural 3D feel
1200px	Subtle, barely perceptible depth

Perspective Origin

perspective-origin controls the viewer's vantage point:

.container {
  perspective: 600px;
  perspective-origin: top left;
}

This changes the vanishing point, making one corner of the element appear closer while the opposite corner recedes.

Combining with Shadows

Adding a dynamic shadow enhances the 3D illusion:

.tilt-card:hover {
  transform: rotateX(10deg) rotateY(-10deg);
  box-shadow: 5px 10px 20px rgba(0,0,0,0.3);
}