3D Perspective Card

import React from 'react';

const Card3D = () => {
  const handleMouseMove = (e) => {
    const card = e.currentTarget;
    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;
    
    // Calculate rotation (max 15deg)
    const rotateX = ((y - centerY) / centerY) * -15;
    const rotateY = ((x - centerX) / centerX) * 15;
    
    card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
  };

  const handleMouseLeave = (e) => {
    e.currentTarget.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
  };

  return (
    <div 
      className="w-full h-80 bg-gray-900 rounded-xl transition-transform duration-100 ease-linear shadow-2xl"
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
    >
        <div className="p-8 text-white h-full flex flex-col justify-end">
            <h3 style={{ transform: 'translateZ(50px)' }} className="text-2xl font-bold">
                Parallax Depth
            </h3>
        </div>
    </div>
  );
};