Skip to content
Sign in

3D Cards for React and Tailwind

A 3D card responds to the pointer, which makes a flat page feel physical. The effect should stay subtle and text should stay sharp while it tilts. Touch screens have no pointer, so check what happens there too. Install one with a single command, then use it for a few things worth lingering on. Keep the tilt small, because a little goes a long way.

Tilt
Tilt

About 3D cards

3D cards tilt toward the pointer, lift their contents onto separate layers and catch a moving light as they turn. Some use plain CSS perspective and transforms, others add a glare layer, a parallax image or a flip that shows a second face on the back.

Keep the tilt small, a few degrees is enough to read as depth, and ease it back to flat when the pointer leaves. On touch screens there is no hover, so make sure the card still looks finished when it never moves, and switch the motion off for reduced motion settings.

Frequently asked questions

Track the pointer over the card, turn its position into small rotateX and rotateY values, and apply them with a CSS transform inside a parent that sets perspective. Animate back to zero when the pointer leaves.

A 3D card tilts as you move over it and stays on one face. A flip card turns a full half circle to reveal a back face, using backface-visibility to hide whichever side faces away.

Lay a gradient over the card and move its centre with the pointer, the same way the tilt follows it. Blend it softly and keep it faint, so it reads as light rather than a white smear.

Not as a hover effect, since there is no pointer to follow. Some cards use the device orientation instead, which needs permission on iOS. Most should simply rest flat and look complete on touch.

Not if it only changes transform and opacity, which the browser handles on the compositor. Avoid animating shadows, filters or layout properties on every pointer move, and throttle updates to animation frames.

Usually between five and fifteen degrees at the edges. More than that makes text hard to read and looks like a toy. Larger cards need less tilt than small ones to feel the same.

Yes, but keep them on the card's top layer and make sure the tilt doesn't move them under a click. Reduce or pause the motion while a control inside has keyboard focus.

Explore more