Let’s create a 3D Card Hover Animation using HTML, CSS, and JavaScript. This project adds a realistic 3D tilt effect to cards when users hover over them, making the UI feel modern and interactive.
We’ll use:
- HTML to structure the card layout.
- CSS to create the 3D perspective, shadows, and smooth hover animations.
- JavaScript to enhance the motion and make the interaction feel more dynamic.
This project is perfect for portfolios, landing pages, and modern websites where visual impact matters. It’s a great way to level up your UI animation skills and impress users with subtle 3D effects.
HTML :
This HTML creates interactive 3D product cards using the model-viewer library. Each .card contains a 3D keyboard model (.glb file) displayed inside the <model-viewer> tag, which handles rendering, lighting, and shadows. The glass and gradient-blur layers add a frosted-glass visual effect, while CSS (from style.css) applies the 3D hover animation. The content section shows the product name and description, and the colored dots call the changeModelStyle() function from script.js to dynamically change the model’s appearance, such as color or rotation, making each card feel interactive and premium.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D Card Hover Animation | @coding.stella</title>
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="card">
<div class="overflow">
<div class="model">
<model-viewer src="https://assets.codepen.io/3421562/leaves_keyboard.glb" shadow-intensity="0.4"></model-viewer>
</div>
</div>
<div class="glass">
<div class="gradient-blur"><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<div class="content">
<h2>LeafKey</h2>
<p>A keyboard that brings the tranquility of the forest to your fingertips.</p>
<div class="options">
<div onclick="changeModelStyle(this, 0);" style="background: #f2c173;"></div>
<div onclick="changeModelStyle(this, 60);" style="background: #96dd78;"></div>
<div onclick="changeModelStyle(this, 110);" style="background: #6ee5bc;"></div>
</div>
</div>
</div>
<div class="card">
<div class="overflow">
<div class="model">
<model-viewer src="https://assets.codepen.io/3421562/topo_keyboard.glb" shadow-intensity="0.4"></model-viewer>
</div>
</div>
<div class="glass">
<div class="gradient-blur"><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<div class="content">
<h2>TopoKey</h2>
<p>Custom illuminated keyboard with neon topology mapped out in every key.</p>
<div class="options">
<div onclick="changeModelStyle(this, 0);" style="background: #2cb4f0;"></div>
<div onclick="changeModelStyle(this, 110);" style="background: #ff69e4;"></div>
<div onclick="changeModelStyle(this, 290);" style="background: #16b83f;"></div>
</div>
</div>
</div>
<div class="card">
<div class="overflow">
<div class="model">
<model-viewer src="https://assets.codepen.io/3421562/panda_keyboard.glb" shadow-intensity="0.4"></model-viewer>
</div>
</div>
<div class="glass">
<div class="gradient-blur"><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<div class="content">
<h2>PandaKey</h2>
<p>Panda, panda, panda, panda, panda, panda... panda</p>
<div class="options">
<div onclick="changeModelStyle(this, 0);" style="background: #1e1e1e;"></div>
<div onclick="changeModelStyle(this, 0, 1);" style="background: #eee;"></div>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
CSS :
This CSS styles the 3D product cards with a modern glassmorphism look and smooth animations. It uses CSS variables to control card size, colors, and shadows, flexbox to center everything, and media queries to hide cards on smaller screens. The .card layout stacks content at the bottom while the 3D model is positioned above it, fading in when loaded. The glass and gradient-blur layers use multiple backdrop blurs and masks to create a realistic frosted-glass effect, while transitions, shadows, and hover-ready elements make the cards feel deep, soft, and interactive.
@import url('https://fonts.cdnfonts.com/css/satoshi');
* {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
}
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
margin: 0;
padding-top: 120px;
background: #ededed;
font-family: 'Satoshi', sans-serif;
--scale: clamp(200px, 22vw, 300px);
}
.card {
--clr: #7da072;
--fclr: #f0ffe2;
&:nth-child(2) {
--clr: #2e2e2e;
--fclr: #fefefe;
}
&:nth-child(3) {
--clr: #fff;
--fclr: #000;
}
width: var(--scale);
height: 364px;
min-width: var(--scale);
background: var(--clr);
border-radius: 8px;
box-shadow: -8px -8px 24px 0 #fffc,
1px 1px 3px 0px #0002,
12px 42px 24px -8px #0001,
10px 24px 42px 0 #0001,
1px 4px 12px 0 #0002;
&:nth-child(1) {
box-shadow:
-8px -8px 24px 0 #fffc,
1px 1px 3px 0px #7da07277,
12px 42px 24px -8px #7da07233,
10px 24px 42px 0 #7da07233,
1px 4px 12px 0 #7da07244;
}
&:nth-child(2) {
box-shadow:
-8px -8px 24px 0 #fffc,
1px 1px 3px 0px #0006,
12px 42px 24px -8px #0003,
10px 24px 42px 0 #0003,
1px 4px 12px 0 #0006;
}
position: relative;
display: flex;
flex-direction: column;
justify-content: end;
align-items: center;
cursor: pointer;
margin: auto 24px;
.content {
position: relative;
z-index: 1;
bottom: 0;
top: unset;
height: fit-content;
padding: 12px 24px;
h2,
p {
margin: 0;
padding: 0;
line-height: 124%;
margin-bottom: 8px;
font-weight: 700;
color: var(--fclr);
}
p {
font-weight: 500;
margin-bottom: 16px;
}
.options {
position: absolute;
display: flex;
gap: 4px;
bottom: 8px;
right: 12px;
>div {
cursor: pointer;
width: 24px;
height: 16px;
border-radius: 4px;
background: white;
border: 1px solid #aaa8;
transition: border 0.1s ease-in-out;
&:hover {
border: 1px solid #fff;
}
}
}
}
.glass {
pointer-events: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80%;
background: linear-gradient(transparent, var(--clr) 80%);
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
overflow: hidden;
}
.overflow {
pointer-events: none;
position: absolute;
width: 200%;
height: 200%;
overflow: hidden;
display: flex;
justify-content: end;
align-items: end;
clip-path: polygon(0 0, 100% 0, 100% 60%, 75% 60%, 75% 100%, 25% 100%, 25% 60%, 0 60%);
}
.model {
position: absolute;
width: 100%;
height: 100%;
bottom: -10%;
display: flex;
justify-content: center;
align-items: center;
model-viewer {
position: absolute;
width: 500px;
height: 500px;
width: 500px;
height: calc((5/3) * var(--scale));
--progress-bar-color: none;
--progress-bar-height: 0px;
opacity: 0;
transition: filter 0.4s ease-in-out;
&.loaded {
animation: onLoad 1s ease-in forwards;
}
}
}
@media (max-width: 700px) {
&:nth-child(3) {
display: none;
}
}
@media (max-width: 468px) {
&:nth-child(1) {
display: none;
}
}
}
@keyframes onLoad {
to {
opacity: 1;
}
}
.gradient-blur {
position: absolute;
z-index: 1;
height: 100%;
inset: auto 0 0 0;
pointer-events: none;
}
.gradient-blur:nth-child(2) {
inset: auto 0;
}
.gradient-blur>div,
.gradient-blur::before,
.gradient-blur::after {
position: absolute;
inset: 0;
--p1: 0%;
--p2: 12.5%;
--p3: 25%;
--p4: 37.5%;
--p5: 50%;
--p6: 62.5%;
--p7: 75%;
--p8: 87.5%;
--p9: 100%;
}
.gradient-blur::before {
content: "";
z-index: 1;
backdrop-filter: blur(0.5px);
mask: linear-gradient(to bottom,
rgba(0, 0, 0, 0) var(--p1),
rgba(0, 0, 0, 1) var(--p2),
rgba(0, 0, 0, 1) var(--p3),
rgba(0, 0, 0, 0) var(--p4));
}
.gradient-blur>div:nth-of-type(1) {
z-index: 2;
backdrop-filter: blur(1px);
mask: linear-gradient(to bottom,
rgba(0, 0, 0, 0) var(--p2),
rgba(0, 0, 0, 1) var(--p3),
rgba(0, 0, 0, 1) var(--p4),
rgba(0, 0, 0, 0) var(--p5));
}
.gradient-blur>div:nth-of-type(2) {
z-index: 3;
backdrop-filter: blur(2px);
mask: linear-gradient(to bottom,
rgba(0, 0, 0, 0) var(--p3),
rgba(0, 0, 0, 1) var(--p4),
rgba(0, 0, 0, 1) var(--p5),
rgba(0, 0, 0, 0) var(--p6));
}
.gradient-blur>div:nth-of-type(3) {
z-index: 4;
backdrop-filter: blur(4px);
mask: linear-gradient(to bottom,
rgba(0, 0, 0, 0) var(--p4),
rgba(0, 0, 0, 1) var(--p5),
rgba(0, 0, 0, 1) var(--p6),
rgba(0, 0, 0, 0) var(--p7));
}
.gradient-blur>div:nth-of-type(4) {
z-index: 5;
backdrop-filter: blur(8px);
mask: linear-gradient(to bottom,
rgba(0, 0, 0, 0) var(--p5),
rgba(0, 0, 0, 1) var(--p6),
rgba(0, 0, 0, 1) var(--p7),
rgba(0, 0, 0, 0) var(--p8));
}
.gradient-blur>div:nth-of-type(5) {
z-index: 6;
backdrop-filter: blur(16px);
mask: linear-gradient(to bottom,
rgba(0, 0, 0, 0) var(--p6),
rgba(0, 0, 0, 1) var(--p7),
rgba(0, 0, 0, 1) var(--p8),
rgba(0, 0, 0, 0) var(--p9));
}
.gradient-blur>div:nth-of-type(6) {
z-index: 7;
backdrop-filter: blur(32px);
mask: linear-gradient(to bottom,
rgba(0, 0, 0, 0) var(--p7),
rgba(0, 0, 0, 1) var(--p8),
rgba(0, 0, 0, 1) var(--p9));
}
.gradient-blur::after {
content: "";
z-index: 8;
backdrop-filter: blur(64px);
mask: linear-gradient(to bottom,
rgba(0, 0, 0, 0) var(--p8),
rgba(0, 0, 0, 1) var(--p9));
}
JavaScript:
This JavaScript controls the 3D card interactions and model styling. It selects all cards and their <model-viewer> elements, sets a default camera angle, and smoothly changes the camera orbit and target when a card is hovered to create a 3D tilt effect. When the model finishes loading, a loaded class is added to trigger a fade-in animation. The changeModelStyle() function is used by the color options to dynamically change the model’s appearance using CSS filters like hue-rotate and invert, letting users switch styles instantly.
(() => {
const modelViewers = document.querySelectorAll('model-viewer');
const cards = document.querySelectorAll('.card');
const defaultOrbit = '64deg 25deg 64m';
const hoverOrbit = '90deg -42deg 50m';
const defaultTarget = '8m 1m 1m';
const hoverTarget = '4m 1m 1m';
const applyOrbit = (modelViewer, orbit, target) => {
modelViewer.setAttribute('camera-orbit', orbit);
modelViewer.setAttribute('camera-target', target);
modelViewer.setAttribute('interpolation-decay', '124');
};
cards.forEach((card, index) => {
const modelViewer = modelViewers[index];
if (modelViewer) {
applyOrbit(modelViewer, defaultOrbit, defaultTarget);
card.addEventListener('mouseenter', () => applyOrbit(modelViewer, hoverOrbit, hoverTarget));
card.addEventListener('mouseleave', () => applyOrbit(modelViewer, defaultOrbit, defaultTarget));
modelViewer.addEventListener('load', () => {
modelViewer.classList.add('loaded');
});
} else {
console.log(`No model found for card at i:${index}`);
}
});
})();
function changeModelStyle(element, deg, invert = 0) {
const card = element.closest('.card');
const modelViewer = card.querySelector('model-viewer');
if (modelViewer) { modelViewer.style.filter = `hue-rotate(${deg}deg) invert(${invert})`; }
}
In conclusion, building a 3D Card Hover Animation with HTML, CSS, and JavaScript is a simple yet powerful way to enhance user experience. It helps you understand 3D transforms, perspective, and smooth interactions while creating a visually stunning effect 🚀
If you run into any problems with your project, worry not. The remedy is just a click away – Download the source code and confront your coding challenges with enthusiasm. Enjoy your coding adventure!
