Perspective tilt on hover
The preview wraps .perspective-tilt-card in a perspective parent; hovering the padded area applies a fixed oblique rotate for a glossy trading-card feel.
Pro license
Hover the padded frame—the tile lifts with a single transform pair.
Widely Supported
Quick implementation
.perspective-tilt-demo { perspective: 900px; }
.perspective-tilt-card {
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.perspective-tilt-demo:hover .perspective-tilt-card {
transform: rotateX(-6deg) rotateY(8deg);
}Prompt this to your LLM
Pricing and collectibles.
You are adding a perspective tilt on hover.
Goal: parent has perspective; child rotates slightly on X and Y when hovering the parent.
Constraints:
- prefers-reduced-motion: no tilt.
- Keep angles subtle.
Return CSS.Why this matters in 2026
Depth sells premium tiers; a single hover transform is cheaper than canvas shaders.
The logic
Transform on the child keeps lighting consistent; the parent’s padding defines the hover target.
Accessibility & performance
Disable the tilt for reduced motion; avoid combining with scroll-jacking.