perspective必须加在父容器上而非卡片本身，否则rotatey仅作平面旋转；需配合transform-style: preserve-3d、backface-visibility: hidden及transition写在常态样式中，才能实现正确3d翻转。
perspective 必须加在父容器上，不是卡片本身
加了 transform: rotateY(180deg) 却没翻转？大概率是把 perspective 错写在了卡片元素（比如 .card）上。这个属性定义的是观察者到 z=0 平面的距离，它只对**子元素的 3D 渲染上下文**起作用，必须设在包裹前后两面的父容器上（如 .card-container）。
常见错误写法：.card { transform: perspective(1000px) rotateY(180deg); } ❌ 它不会启用 3D 渲染管线，rotateY 就只是平面旋转。
-
perspective值建议用600px～1200px：太小（如100px）会严重畸变；太大（如5000px）接近无透视，翻转感弱 - 父容器必须同时加
transform-style: preserve-3d，否则子元素的 3D 变换会被扁平化 - 如果父容器有 padding 或 border，可能干扰定位，建议用
box-sizing: border-box
前后两面要重叠且隐藏背面
正面和背面必须完全重叠，否则翻转时会看到错位或留白。它们不能靠文档流堆叠，得用 position: absolute + top: 0; left: 0; 对齐，并共用同一尺寸。
不加 backface-visibility: hidden 的后果很直接：翻转到 90° 时，正反面同时显示、文字镜像、颜色混叠——这不是动画卡顿，而是渲染逻辑错误。
- 该属性必须加在前后两个面元素上（如
.card-front和.card-back），不是父容器 - 背面需默认加
transform: rotateY(180deg)，让它初始就朝后；翻转动作只需控制整体（如.card）的rotateY - 如果卡片用了
border-radius或box-shadow，翻转中边缘可能被裁切，给父容器加overflow: visible
hover 触发翻转时 transition 要写在常态里
只写 .card:hover { transform: rotateY(180deg); } 是不够的。transition 必须声明在常态样式中，否则首次 hover 没过渡，第二次才生效。
更关键的是：过渡目标必须明确限定为 transform，而不是 all。否则缩放、位移等其他变换也会被意外动效化，导致行为不可控。
- 正确写法：
.card { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } - 推荐用
cubic-bezier(0.34, 1.56, 0.64, 1)替代ease-in-out，翻转带点弹性，更自然 - 移动端 iOS Safari 默认不触发 :hover，需补充
.card:active { transform: rotateY(180deg); }或改用 JS 切换 class
transform-origin 决定翻转轴心位置
默认 transform-origin: 50% 50% 是绕中心翻转，看起来最稳。但如果你想要「书页式」沿左侧翻开的效果，就得改成 transform-origin: 0 50%（等价于 left center）。
这个值直接影响视觉锚点。不调的话，即使 rotateY(180deg) 正确执行，卡片也会像“漂”在空中转，缺乏物理真实感。
- 若卡片有固定宽度，用
left center更稳妥；用百分比（如0% 50%）在响应式布局中可能偏移 - 修改
transform-origin后，务必检查背面是否仍能完整覆盖正面——有时需要微调z-index或transform偏移 - Chrome/Safari 在某些 GPU 下对 3D 文本渲染不稳定，可加
transform: translateZ(0)强制硬件加速（慎用will-change）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
