3D Card Hover Effect

How It Works

This effect uses CSS 3D transforms combined with JavaScript mouse tracking to create a realistic tilt effect.

The CSS

.card {
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
}

.card-content {
  transform: translateZ(50px);
}

The JavaScript

card.addEventListener('mousemove', (e) => {
  const rect = card.getBoundingClientRect();
  const x = (e.clientX - rect.left) / rect.width - 0.5;
  const y = (e.clientY - rect.top) / rect.height - 0.5;
  card.style.transform = `rotateY(${x * 20}deg) rotateX(${-y * 20}deg)`;
});

card.addEventListener('mouseleave', () => {
  card.style.transform = 'rotateY(0) rotateX(0)';
});

Accessibility Considerations

Remember to respect user preferences for reduced motion:

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
    transform: none !important;
  }
}