Introduction
Interactive 3D cards have become an essential element of modern web design. They capture attention, enrich the user experience and give a premium dimension to your interfaces.
In this complete tutorial, we will explore 5 different techniques to create spectacular interactive cards. Each example comes with a functional demo and the complete code you can copy and adapt.
This tutorial requires basic knowledge of CSS (transforms, transitions) and JavaScript. The effects use transform-style: preserve-3d and perspective for 3D.
1. Card with tilt effect on mouse movement
The tilt effect follows mouse movement to tilt the card in the direction of the cursor. This creates a very satisfying impression of depth and responsiveness.
3D Tilt Effect
Move your mouse over this card to see the interactive 3D tilt effect with dynamic reflection.
How it works
JavaScript calculates the relative position of the mouse relative to the center of the card, then applies a proportional rotation on the X and Y axes. A light effect also follows the cursor.
.tilt-card {
width: 300px;
height: 380px;
background: linear-gradient(145deg, #1a1a2e, #16213e);
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.1);
padding: 32px;
transform-style: preserve-3d;
transition: transform 0.1s ease-out;
cursor: pointer;
position: relative;
overflow: hidden;
}
/* Light effect that follows the mouse */
.tilt-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
rgba(99, 102, 241, 0.15),
transparent 50%
);
opacity: 0;
transition: opacity 0.3s;
}
.tilt-card:hover::before {
opacity: 1;
}
/* 3D elements with different depths */
.tilt-card-icon {
transform: translateZ(40px);
}
.tilt-card-title {
transform: translateZ(30px);
}
.tilt-card-text {
transform: translateZ(20px);
}const card = document.querySelector('.tilt-card');
card.addEventListener('mousemove', (e) => {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = (y - centerY) / 10;
const rotateY = (centerX - x) / 10;
card.style.transform = `
perspective(1000px)
rotateX(${rotateX}deg)
rotateY(${rotateY}deg)
scale3d(1.05, 1.05, 1.05)
`;
// Light position
const percentX = (x / rect.width) * 100;
const percentY = (y / rect.height) * 100;
card.style.setProperty('--mouse-x', percentX + '%');
card.style.setProperty('--mouse-y', percentY + '%');
});
card.addEventListener('mouseleave', () => {
card.style.transform = '';
});2. Flip card (front/back)
The flip card reveals hidden content on the back when hovered. Ideal for displaying additional information or a call-to-action.
Flip Card
Hover this card to discover the hidden content on the back with a smooth 3D rotation animation.
Back revealed!
You've discovered the hidden content. Perfect for CTAs or additional information.
.flip-card {
width: 300px;
height: 380px;
perspective: 1000px;
cursor: pointer;
}
.flip-card-inner {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 20px;
padding: 32px;
}
.flip-card-front {
background: linear-gradient(145deg, #1a1a2e, #16213e);
border: 1px solid rgba(255,255,255,0.1);
}
.flip-card-back {
background: linear-gradient(145deg, #6366f1, #8b5cf6);
transform: rotateY(180deg);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}3. Glassmorphism card with blur
Glassmorphism creates an elegant frosted glass effect. Combined with colored shapes in the background, the result is modern and sophisticated.
Premium Plan
Acces illimite/* Container with colored shapes */
.glass-container {
position: relative;
width: 340px;
height: 420px;
}
.glass-bg-shapes {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: 24px;
}
.glass-shape {
position: absolute;
border-radius: 50%;
filter: blur(40px);
}
.glass-shape-1 {
width: 200px;
height: 200px;
background: #6366f1;
top: -50px;
left: -50px;
opacity: 0.6;
}
.glass-shape-2 {
width: 150px;
height: 150px;
background: #8b5cf6;
bottom: -30px;
right: -30px;
opacity: 0.6;
}
/* The glass card */
.glass-card {
position: relative;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 32px;
transition: all 0.3s ease;
}
.glass-card:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-5px);
}The backdrop-filter property is not supported by all browsers. Remember to add -webkit-backdrop-filter for Safari and a fallback with a semi-opaque background.
4. Card with parallax layers effect
The parallax effect creates an illusion of depth by moving different layers at different speeds with mouse movement.
Parallax Layers
Each element moves at a different depth for an immersive 3D effect.
const card = document.querySelector('.parallax-card');
const layers = card.querySelectorAll('.parallax-card-layer');
const content = card.querySelector('.parallax-card-content');
card.addEventListener('mousemove', (e) => {
const rect = card.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width - 0.5;
const y = (e.clientY - rect.top) / rect.height - 0.5;
// Card rotation
card.style.transform = `
perspective(1000px)
rotateY(${x * 10}deg)
rotateX(${-y * 10}deg)
`;
// Layer displacement with different intensities
layers.forEach((layer, i) => {
const depth = (i + 1) * 20;
layer.style.transform = `
translateX(${x * depth}px)
translateY(${y * depth}px)
translateZ(${(i + 1) * 30}px)
`;
});
// Contenu principal
content.style.transform = `
translateX(${x * 30}px)
translateY(${y * 30}px)
translateZ(50px)
`;
});
card.addEventListener('mouseleave', () => {
card.style.transform = '';
layers.forEach(layer => layer.style.transform = '');
content.style.transform = '';
});5. Card with animated glow border
A luminous border effect that rotates around the card on hover. Uses CSS @property to animate a conic-gradient.
Glow Border
Hover to activate the rotating luminous border animation with halo effect.
/* Animatable property definition */
@property --glow-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.glow-card-wrapper {
position: relative;
width: 300px;
height: 380px;
}
/* Animated gradient border */
.glow-card-border {
position: absolute;
inset: -2px;
background: conic-gradient(
from var(--glow-angle, 0deg),
#6366f1,
#8b5cf6,
#d946ef,
#06b6d4,
#6366f1
);
border-radius: 22px;
animation: glowRotate 4s linear infinite;
opacity: 0;
transition: opacity 0.3s;
}
.glow-card-wrapper:hover .glow-card-border {
opacity: 1;
}
@keyframes glowRotate {
0% { --glow-angle: 0deg; }
100% { --glow-angle: 360deg; }
}
/* Halo effect */
.glow-card-border::before {
content: '';
position: absolute;
inset: 0;
background: inherit;
filter: blur(20px);
opacity: 0.5;
}
/* Carte principale */
.glow-card {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(145deg, #12121a, #1a1a2e);
border-radius: 20px;
padding: 32px;
z-index: 1;
}The @property rule allows defining animatable custom CSS properties. Here, it allows animating the angle of the conic-gradient. Supported in Chrome, Edge and Safari 15.4+.
Best practices
Performance
- Use
will-changesparingly on elements that will be animated - Prefer
transformover properties that trigger a reflow (top, left, width...) - Limit the number of animated cards simultaneously visible
- Use
requestAnimationFramefor JavaScript animations
Accessibility
- Respect
prefers-reduced-motionto disable animations - Ensure sufficient contrast for text on glassmorphism cards
- Flip cards must be keyboard accessible (focus, Enter to flip)
- Important content must not be visible only on hover
/* Disable animations for sensitive users */
@media (prefers-reduced-motion: reduce) {
.tilt-card,
.flip-card-inner,
.parallax-card,
.glow-card-border {
transition: none;
animation: none;
}
.flip-card:hover .flip-card-inner {
transform: none;
}
}
/* Keyboard support for flip card */
.flip-card:focus-within .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card {
outline: none;
}
.flip-card:focus-visible {
outline: 2px solid #6366f1;
outline-offset: 4px;
}Conclusion
Interactive 3D cards are an excellent way to enrich the user experience of your websites. Whether you choose the tilt effect for its dynamism, the flip for its playful side, or glassmorphism for its elegance, these techniques will bring a premium dimension to your interfaces.
Don't hesitate to combine these effects or adapt them to your needs. The important thing is to always keep performance and accessibility in mind to offer a pleasant experience to all your users.
Find over 50 ready-to-use card effects in our effects library, with one-click copyable code.