.tilt-wrapper {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
perspective: 1000px;
padding: 50px;
display: flex;
justify-content: center;
}
.tilt-card {
width: 300px;
padding: 40px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
transform-style: preserve-3d;
transition: transform 0.1s ease;
}
.tilt-card h3 {
font-size: 2rem;
margin: 0 0 15px 0;
transform: translateZ(30px);
}
.tilt-card p {
line-height: 1.6;
transform: translateZ(20px);
}
const card = document.getElementById("tiltCard");
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) / centerY) * -10;
const rotateY = ((x - centerX) / centerX) * 10;
card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});
card.addEventListener("mouseleave", () => {
card.style.transform = "rotateX(0) rotateY(0)";
});