perspective属性必须加在父容器上而非卡片本身，且需配合transform-style: preserve-3d；前后两面须设backface-visibility: hidden、position: absolute重叠，背面加rotatey(180deg)；翻转由容器hover触发transition控制。
perspective 属性必须加在容器上，不是卡片本身
很多人把 perspective 直接写在卡片元素（比如 .card）上，结果动画没立体感——因为 perspective 定义的是「观察者到 z=0 平面的距离」，它影响的是**子元素的 3D 渲染上下文**，必须作用于父容器（如 .card-container）。否则子元素的 rotateY 就只是平面旋转。
正确做法：
– 给容器设 perspective: 1000px（值越小，透视感越强，但太小容易变形）
– 容器需启用 3D 渲染上下文：加上 transform-style: preserve-3d
– 卡片本身不设 perspective，只负责 transform: rotateY(...)
rotateY 动画要配合 transform-origin 控制翻转轴心
默认 transform-origin 是 50% 50%（中心点），翻转看起来自然；但如果想实现「沿左侧边缘翻转」（像书页），就得改成 transform-origin: left center。这个值直接影响视觉锚点，不调的话，即使 rotateY(180deg) 也会感觉卡片“漂”着转。
常见组合：
– 中心翻转：保持默认 transform-origin: 50% 50%
– 左侧翻转：设 transform-origin: 0 50%（等价于 left center）
– 注意：如果卡片有 border-radius 或阴影，翻转时边缘可能被裁切，建议给容器加 overflow: visible
前后两面要用 backface-visibility 隐藏背面内容
不加 backface-visibility: hidden 的话，翻转到 90° 时，正面和背面会同时显示重叠，甚至出现文字镜像、颜色混叠。这个属性必须加在**前后两个面元素**（如 .card-front 和 .card-back）上，而不是容器。
关键点：
– 两面都需设 position: absolute 且 top: 0; left: 0; width: 100%; height: 100%，确保完全重叠
– 背面需额外加 transform: rotateY(180deg)，让它初始就朝后
– 翻转动画只需控制容器或卡片整体的 rotateY，不要单独动前后两面的 transform
hover 触发时用 transition 比 animation 更可控
用 :hover + transition 实现翻转，比写 keyframes 动画更轻量、更易响应交互。但要注意：
– transition 必须写在**常态样式里**（不是 :hover 里），否则首次 hover 没过渡
– 推荐过渡属性为 transform，避免触发重排，性能更好
– 可加 transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1) 让翻转带点弹性，比 ease-in-out 更自然
示例关键片段：.card { transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }.card-container:hover .card { transform: rotateY(180deg); }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
