直接用var(--rotate-y)会导致transform失效，因CSS变量是字符串而rotateY()需数值角度；必须用@property声明syntax: ""并配合preserve-3d和perspective才能实现可动画的3D翻转。
transform里直接用var(--rotate-y)会失效
浏览器不解析rotateY(var(--rotate-y))这种写法，因为CSS变量是字符串，而rotateY()需要数值+单位的合法角度值。整个transform声明会被静默丢弃，卡片看起来“完全不动”。这不是语法错误，而是规范限制——CSS函数内部不支持变量求值。
真正能生效的路径只有两条：
– 用@property声明变量类型，让var(--rotate-y)具备插值能力
– 改用calc(var(--rotate-y) * 1deg)，但必须确保--rotate-y存的是纯数字（如180），且目标浏览器支持该语法（Safari ≥ 16.4）
常见错误现象：
– 卡片无反应，控制台无报错
– getComputedStyle(el).transform返回none
– 变量在content或opacity里能读取，但在transform里无效
@property是让--rotate-y参与动画的必要前提
没有@property，transition: --rotate-y 0.4s根本不会触发插值；浏览器只把它当普通自定义属性，不会做角度渐变。
必须这样声明：
:root {
@property --rotate-y {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
}</angle>
关键点：
– syntax: "不能写成""或"，否则无法驱动rotateY()
– inherits: false避免子元素意外继承旋转值导致翻转错位
– 声明必须在:root，局部作用域（如.card）不生效
之后才能安全写：.card__face--back { transform: rotateY(var(--rotate-y)); }.card:hover { --rotate-y: 180deg; }
perspective和transform-style: preserve-3d必须配对出现
只加perspective不加transform-style: preserve-3d，或者反过来，翻转都会塌陷成2D——卡片像被压扁的纸片，没有纵深感。
正确层级关系：
– perspective设在卡片容器（如.card-container或.card）上
– transform-style: preserve-3d必须设在**执行旋转的直接父元素**上（通常是.card或.card-inner）
– 正反面元素（.card-front/.card-back）必须是它的直系子元素
容易踩的坑：
– 把perspective写在:root，结果整页元素都受透视影响，布局错乱
– 在.card-front上单独加transform-style: preserve-3d，但它的父级没开3D上下文，无效
– perspective值太小（如100px），翻转时边缘严重畸变
过渡动画必须落在被旋转的元素上，而非父容器
很多人把transition: transform 0.4s写在.card上，却对.card-front和.card-back的transform做修改，结果动画不触发。
原因：CSS过渡只响应**自身属性变化**。.card的transform没变，它只是个容器；真正变化的是子元素的transform值。
正确做法：
– 给.card-front和.card-back都加transition: transform 0.4s ease
– 确保两者的transition参数一致，否则翻转会“分段卡顿”
– 不要给.card本身加transition，除非你真在动它的transform
额外注意：
– backface-visibility: hidden必须加在正反面元素上，否则翻转后背面文字镜像显示
– 移动端需加touch-action: manipulation防300ms延迟，但别设none，否则手势拖拽失效
最易被忽略的一点：CSS变量在这里不是“数学变量”，而是状态信标。它本身不旋转任何东西，真正起效的是@property赋予的类型能力 + 3D渲染上下文就绪 + 过渡目标精准锁定——三者缺一，翻转就静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
