A card that tips towards the cursor
lives on the parent
CaveatThe perspective belongs on the parent, not on the card. Put it on the transformed element and every card gets its own vanishing point, so a row of them tilts in visibly different directions.
FallbackText blurs slightly while a 3D transform is applied — the glyphs are being rasterised at a scale they were not hinted for. Keep the angle small and never tilt body copy.
.scene { perspective: 700px; } /* on the parent */
.scene:hover .card {
rotate: x 9deg;
box-shadow: 0 18px 30px rgba(0,0,0,.45);
}Published
Questions
Where does the perspective go — on the card or its parent?
The parent. Put it on the transformed element and every card gets its own vanishing point, so a row of them tilts in visibly different directions instead of sharing one scene.
Why does the text go blurry while the card tilts?
The glyphs are being rasterised at a scale they were not hinted for — that is what a 3D transform does to type. Keep the angle small, and never tilt body copy; a heading and an image survive it, a paragraph does not.
How big should the tilt be?
Small enough that you notice the depth and not the effect — a few degrees. The giveaway of an overdone tilt is that people stop reading the card and start playing with it.