Interactive 3D transformations and animations
Click me to see the back!
Great! Now click again to flip back.
Move your mouse over this card to see it tilt in 3D space with a glowing effect.
This card follows your mouse movement for a dynamic 3D effect.
Click to open →
This is the inside of the book with your content.
// 3D Card Flip
.card-3d {
perspective: 1000px;
}
.card-inner {
transform-style: preserve-3d;
transition: transform 0.8s;
}
.card-3d.flipped .card-inner {
transform: rotateY(180deg);
}
// JavaScript for Mouse Tracking
const tiltCard = document.getElementById('tiltCard');
tiltCard.addEventListener('mousemove', (e) => {
const rect = tiltCard.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;
tiltCard.style.transform =
`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});
tiltCard.addEventListener('mouseleave', () => {
tiltCard.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
});