3D 卡片翻转

{
  "slug": "flip-card",
  "name": "3D 卡片翻转",
  "nameEn": "Flip Card",
  "description": "卡片沿 Y 轴进行 3D 翻转，显示背面内容，需要透视容器和 backface-visibility 控制。",
  "descriptionEn": "Card flips along the Y-axis in 3D space to reveal back content. Requires a perspective container and backface-visibility control.",
  "category": "hover",
  "tags": [
    "flip",
    "3d",
    "card",
    "hover",
    "perspective"
  ],
  "trigger": "on-hover",
  "difficulty": "advanced",
  "duration": "600ms",
  "easing": "ease-in-out",
  "cssProperties": [
    "transform"
  ],
  "isGPUAccelerated": true,
  "previewBg": "light",
  "keywords": [
    "flip",
    "card",
    "3d",
    "rotate",
    "perspective",
    "backface",
    "two-sided"
  ],
  "useCases": [
    "Team member profile cards",
    "Product feature reveal",
    "FAQ toggle cards",
    "Interactive info cards"
  ],
  "relatedAnimations": [
    "hover-lift",
    "hover-glow"
  ],
  "recommendedStyles": [
    "glassmorphism",
    "modern-gradient",
    "dark-mode"
  ],
  "codeSnippets": [
    {
      "label": "CSS Keyframes",
      "language": "css",
      "code": ".flip-card {\n  perspective: 1000px;\n  width: 300px;\n  height: 200px;\n}\n\n.flip-card-inner {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  will-change: transform;\n  transition: transform 600ms ease-in-out;\n  transform-style: preserve-3d;\n}\n\n.flip-card:hover .flip-card-inner {\n  transform: rotateY(180deg);\n}\n\n.flip-card-front,\n.flip-card-back {\n  position: absolute;\n  inset: 0;\n  backface-visibility: hidden;\n  border-radius: 12px;\n}\n\n.flip-card-front {\n  background: var(--card-bg, hsl(0 0% 100%));\n}\n\n.flip-card-back {\n  background: var(--card-bg-alt, hsl(0 0% 96%));\n  transform: rotateY(180deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .flip-card {\n    animation: none;\n    transition: none;\n  }\n}"
    },
    {
      "label": "Tailwind CSS",
      "language": "css",
      "code": "/* Add to your global CSS or Tailwind v4 theme */\n@utility flip-card {\n  perspective: 1000px;\n}\n\n@utility flip-card-inner {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  will-change: transform;\n  transition: transform 600ms ease-in-out;\n  transform-style: preserve-3d;\n}\n\n@utility flip-card-inner-flipped {\n  transform: rotateY(180deg);\n}\n\n@utility flip-card-face {\n  position: absolute;\n  inset: 0;\n  backface-visibility: hidden;\n  border-radius: var(--radius-lg, 12px);\n}\n\n@utility flip-card-back {\n  transform: rotateY(180deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .flip-card {\n    animation: none;\n    transition: none;\n  }\n}"
    },
    {
      "label": "Framer Motion",
      "language": "tsx",
      "code": "import { motion } from \"framer-motion\";\n\n// Tip: consider disabling for reduced motion users\n// import { useReducedMotion } from \"framer-motion\";\n\n<div style={{ perspective: \"800px\" }}>\n  <motion.div\n    style={{ transformStyle: \"preserve-3d\" }}\n    whileHover={{ rotateY: 180 }}\n    transition={{ duration: 0.6, ease: \"easeInOut\" }}\n  >\n    {/* Front face */}\n    <div style={{ backfaceVisibility: \"hidden\" }}>\n      Front Content\n    </div>\n    {/* Back face */}\n    <div style={{\n      backfaceVisibility: \"hidden\",\n      transform: \"rotateY(180deg)\",\n      position: \"absolute\",\n      inset: 0,\n    }}>\n      Back Content\n    </div>\n  </motion.div>\n</div>"
    }
  ]
}