3D Tilt
Mouse position controls live rotateX/rotateY perspective transforms, with a radial shine that follows the cursor.
3D Tilt the 11th of 27 designs in the 27 CSS Card Hover Effects collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="card-11">
<div class="card-11__shine"></div>
<div class="card-11__layer">
<span class="card-11__tag">3D</span>
<h4 class="card-11__title">3D Tilt</h4>
<p class="card-11__body">Mouse position controls the tilt angle.</p>
</div>
</div> .card-11__tag {
font-family: monospace;
font-size: 10px;
padding: 2px 8px;
border-radius: 20px;
background: rgba(124, 108, 255, 0.15);
color: #7c6cff;
border: 1px solid rgba(124, 108, 255, 0.3);
display: inline-block;
margin-bottom: 10px;
}
.card-11__title {
font-size: 17px;
font-weight: 700;
color: #f0eeff;
margin-bottom: 6px;
}
.card-11__body {
font-size: 13px;
color: #b8b6d4;
line-height: 1.6;
}
.card-11 {
width: 100%;
max-width: 280px;
position: relative;
overflow: hidden;
padding: 22px;
border-radius: 14px;
background: linear-gradient(160deg, #1a1a28, #111118);
border: 1px solid rgba(255, 255, 255, 0.1);
transform-style: preserve-3d;
cursor: none;
transition: transform 0.08s ease;
}
.card-11__shine {
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 65%);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
}
.card-11:hover .card-11__shine {
opacity: 1;
}
.card-11__layer {
transform: translateZ(22px);
} document.querySelectorAll(".card-11").forEach(function (card) {
card.addEventListener("mousemove", function (e) {
var r = card.getBoundingClientRect();
var x = (e.clientX - r.left) / r.width - 0.5;
var y = (e.clientY - r.top) / r.height - 0.5;
card.style.transform =
"perspective(700px) rotateX(" + (-y * 14) + "deg) rotateY(" + (x * 14) + "deg)";
});
card.addEventListener("mouseleave", function () {
card.style.transform = "";
});
});