Home / 3D and Depth / 3D Tilt Cards
3D Tilt Cards CSS Template, Free with Live Demo
Free 3D tilt card template for a postcard subscription. Cards lean toward your cursor with a moving glare and layers that pop out in depth. Live demo. The example is Postcard Club, a postcard subscription.
What is 3d tilt cards?
A 3D tilt card leans toward your mouse as if you were holding it and turning it in the light. A soft glare moves across the surface, and parts of the card, like the stamp and the city name, float at different depths.
It needs no library. A few lines of JavaScript turn the cursor position into rotateX and rotateY values, and transform-style: preserve-3d with translateZ lifts the inner layers off the card.
Good for
- Product and collectible cards
- Portfolio thumbnails
- Pricing and plan cards
- Travel and event promos
What you get in this template
- Tilt that follows the cursor on each card
- Moving glare with a radial gradient
- Stamp and title raised with translateZ
- Smooth return when the cursor leaves
- Tilt off for reduced motion
The key CSS
This is the part that makes the 3d tilt cards look work. Copy it into your own project.
.row { perspective: 1000px; }
.card {
transform-style: preserve-3d;
transform: rotateX(var(--rx)) rotateY(var(--ry));
transition: transform .3s ease-out;
}
.card::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.45), transparent 50%);
}
.name { transform: translateZ(60px); }How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
How do you make a 3D tilt effect without a library?
Set perspective on the parent, then on pointermove calculate where the cursor is on the card and set rotateX and rotateY from that. About six lines of JavaScript.
How do I make parts of the card pop out?
Add transform-style: preserve-3d to the card and give inner elements translateZ values, like 20px for the picture and 60px for the title.
Does tilt work on phones?
Phones have no hover, so the cards stay flat and still look good. You could add device orientation later if you want.
More 3D and Depth designs
072. Isometric
Stackyard, a fulfillment warehouse
073. Layered Shadows
Forma, a furniture maker
074. Floating Elements
Driftwood, a to-do app
075. Perspective Scroll
Fieldnote, a year in review page
076. Flip Cards
Palabra, a Spanish flashcard app
077. 3D Product Box
Kettle Lane, a tea brand
078. Spatial UI
Habitat, a spatial meeting workspace
079. Depth Blur
Terraza, a family winery