Parallax Hover Card
3D parallax effect on card hover with mouse movement tracking
Code
/* Add JS: document.querySelector('.parallax-card').addEventListener('mousemove', function(e) { const x = (e.clientX - this.offsetLeft - this.offsetWidth/2) / 20; const y = (e.clientY - this.offsetTop - this.offsetHeight/2) / 20; this.style.transform = `rotateY(${x}deg) rotateX(${-y}deg)`; }); document.querySelector('.parallax-card').addEventListener('mouseleave', function() { this.style.transform = 'rotateY(0) rotateX(0)'; }); */
.parallax-card {
width: 300px;
height: 400px;
background: #fff;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease-out;
transform-style: preserve-3d;
perspective: 1000px;
}
.parallax-content {
font-size: 24px;
font-weight: bold;
color: #333;
transform: translateZ(20px);
}HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="parallax-card"</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="parallax-content"</span>>Parallax Card</"attr-name"</span>>class</span>="tag"</span>>div</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>