three-d-card-motion

"use client";

import { motion } from "framer-motion";

const cards = [
  {
    href: "https://www.mythrillfiction.com/force-mage",
    cover:
      "https://ggayane.github.io/css-experiments/cards/force_mage-cover.jpg",
    title:
      "https://ggayane.github.io/css-experiments/cards/force_mage-title.png",
    character:
      "https://ggayane.github.io/css-experiments/cards/force_mage-character.webp",
  },
];

export default function ThreeDCardMotion() {
  return (
    <div
      className="flex justify-center items-center"
      style={{ perspective: "2500px" }}
    >
      <div className="flex gap-12">
        {cards.map((card, index) => (
          <a key={index} href={card.href} target="_blank" rel="noreferrer">
            <motion.div
              className="relative w-[200px] h-[300px] flex justify-center items-end px-4"
              style={{ transformStyle: "preserve-3d" }}
              initial={{
                rotateX: 0,
                rotateY: 0,
                translateY: 0,
              }}
              whileHover={{
                translateY: -15,
              }}
              transition={{ duration: 0.4 }}
            >
              {/* Wrapper (background image) */}
              <motion.div
                className="absolute w-full h-full top-0 left-0 rounded-md overflow-hidden"
                style={{ transformStyle: "preserve-3d", zIndex: 0 }}
                initial={{
                  rotateX: 0,
                  translateY: 0,
                  translateZ: 0,
                  boxShadow: "0px 20px 60px rgba(0,0,0,0.5)",
                }}
                whileHover={{
                  rotateX: 50,
                  translateY: -40,
                  translateZ: -80,
                  boxShadow: "2px 35px 32px -8px rgba(0,0,0,0.75)",
                }}
                transition={{ duration: 0.5 }}
              >
                <img
                  src={card.cover}
                  alt="cover"
                  className="w-full h-full object-cover"
                />
              </motion.div>

              {/* Title */}
              <motion.img
                src={card.title}
                alt="title"
                className="w-full relative z-10"
                initial={{ translateZ: 0 }}
                whileHover={{ translateY: -50, translateZ: 100 }}
                transition={{ duration: 0.5 }}
              />

              {/* Character */}
              <motion.img
                src={card.character}
                alt="character"
                className="w-full absolute top-0 left-0 z-20 opacity-0"
                initial={{ translateZ: 0 }}
                whileHover={{ opacity: 1, translateY: -90, translateZ: 100 }}
                transition={{ duration: 0.5 }}
              />
            </motion.div>
          </a>
        ))}
      </div>
    </div>
  );
}