Home / Snippets / Animation /

3D perspective tilt

The framed stage uses perspective on .anim-3d-demo; hovering tilts the inner surface with combined rotateX and rotateY.

Weekly metrics

Hover the card to preview the parallax lighting—no pointer tracking required.

Widely Supported

3dperspective

Quick implementation

.anim-3d-demo {
  perspective: 900px;
  min-height: 12rem;
}
.anim-3d-demo__inner {
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-3d-demo:hover .anim-3d-demo__inner {
  transform: rotateX(8deg) rotateY(-12deg);
}

Prompt this to your LLM

Product cards and dashboards.

You are adding a static 3D tilt on hover.

Goal: parent perspective ~800–1000px; child rotates slightly on X and Y on :hover.

Constraints:
- prefers-reduced-motion: no tilt.
- Keep angles small (under 12deg).

Return CSS.

Why this matters in 2026

A hint of depth helps dense analytics UIs feel tactile without full WebGL.

The logic

Perspective on the ancestor establishes the camera; preserve-3d keeps the child in that space.

Accessibility & performance

Disable the tilt for reduced motion; avoid pairing with rapid parallax scroll.