3D Tilt Card — Floating Perspective Card on Hover (React + Tailwind)

Name: 3D Tilt Card — Floating Perspective Card on Hover (React + Tailwind)
SKU: products-3d-tilt-card
Availability: InStock

An interactive 3D card that tilts toward your cursor with CSS perspective, while inner items lift on the Z axis (translateZ) for real depth. Zero dependencies, dark mode, and tilt disabled under reduced-motion. Composable CardContainer / CardBody / CardItem API.

React

What's included

Source code
Documentation
Dark mode
TypeScript types
Free updates

Free

Add it to your library and download instantly.

Install (shadcn CLI)

npx shadcn@latest add https://assetzaar.com/r/3d-tilt-card.json

Or use the Code tab to copy the source.

Requirements

So it renders exactly like the preview.

Project setup

Zero dependencies — just Tailwind CSS. Copy the single file and compose with <CardContainer>, <CardBody> and <CardItem translateZ={n}>. The default export is a ready-made demo card. Works in light/dark; the tilt is automatically disabled when the user prefers reduced motion.

Ratings, reviews & activity

No reviews yet — be the first to review this product.

3D Tilt Card — Floating Perspective Card on Hover (React + Tailwind)

What's included

Ratings, reviews & activity

Write a review

More components

Ship faster with Assetzaar Pro