卡片翻转3d效果必须显式写死transform-style: preserve-3d和backface-visibility: hidden，perspective值须用scss变量定义并赋给父容器，rotatey角度与动画时长可变量化但起始终态必须配对声明。
SCSS 可以封装卡片翻转的 3D 效果，但必须把变量用在安全位置——perspective 值只能设在父容器上，不能塞进 transform 函数里；rotateY 角度和动画时长可以变量化，但起始态和终态必须显式写出；backface-visibility: hidden 和 transform-style: preserve-3d 绝对不能交给变量控制。
perspective 值为什么不能写在 transform 里
因为 perspective(800px) 是无效 CSS 函数，浏览器直接忽略。perspective 是独立属性，必须作用于父容器（如 .card-container），为子元素建立共享 3D 渲染上下文。写在 .card 上或塞进 transform 会导致每个卡片拥有独立透视原点，悬停时轴心偏移、抖动错位。
正确做法是用 SCSS 变量定义值，再单独赋给容器：
$perspective-value: 800px;
<p>.card-container {
perspective: $perspective-value;
}
</p>
- 值建议控制在
600px～1200px，太小（如300px）易畸变，太大（如2000px）接近平面旋转 - 不要用
transform: perspective($perspective-value) rotateY(180deg)—— 语法错误且无效果
rotateY 角度和 transition 时长可以用变量，但必须配对写死两态
SCSS 编译后生成静态 CSS，浏览器靠「初始态 + 终态」推导过渡路径。只写 .card:hover { transform: rotateY($rotate-angle) } 不够，必须同时声明未悬停时的 transform: rotateY(0)。
推荐用混合宏封装，避免漏掉起始态：
@mixin flip-3d($angle: 180deg, $duration: 0.6s) {
transform: rotateY(0);
transition: transform $duration ease;
&:hover {
transform: rotateY($angle);
}
}
<p>.card {
@include flip-3d(180deg, 0.6s);
}
</p>
-
$angle可用于 Y 轴或 X 轴翻转（如90deg实现半翻、-180deg反向翻转） -
$duration控制动画节奏，但别设过短（）导致移动端感知卡顿 - 不建议在
@keyframes中用变量驱动rotateY—— 构建工具普遍不支持动态关键帧
哪些属性绝对不能用变量控制
transform-style 和 backface-visibility 是布尔型渲染开关，不是数值型样式。它们决定浏览器是否开启 3D 空间、是否绘制背面，一旦被变量覆盖或条件编译，整个翻转链就断了。
必须显式、无条件写死：
.card {
transform-style: preserve-3d;
}
<p>.card-face {
backface-visibility: hidden;
/<em> 旧版 Safari 需补充 </em>/
-webkit-backface-visibility: hidden;
}
</p>
-
transform-style: preserve-3d必须设在直接包裹正反面的容器上（如.card或.card-inner），不能依赖父级继承 -
backface-visibility: hidden要分别加在.card-front和.card-back上，漏一面就会透出、双影、文字糊成一团 - 千万别写成
@if $enable-backface { backface-visibility: hidden; }—— 这类逻辑在 SCSS 中看似灵活，实则破坏渲染前提
移动端点击翻转必须绕开 :hover，SCSS 封装要预留 JS 接口
iOS Safari 和多数安卓 WebView 对 :hover 支持极弱，纯 CSS 悬停在触屏设备上基本失效。SCSS 封装时得为 JS 切换 class 留好钩子，而不是只服务桌面端。
推荐结构：
.card {
@include flip-3d(180deg, 0.6s);
&.is-flipped {
transform: rotateY(180deg);
}
}
- 保留
:hover供桌面端使用，同时支持.is-flippedclass 供 JS 控制 - 移动端监听
click（别用touchstart，会干扰滚动）切换 class - 若需保持翻转状态（比如点开背面看详情），用
:focus-within+tabindex="0"是纯 CSS 可行解，但仅兼容 iOS 13+/Chrome 84+
最常被忽略的是：transform-style: preserve-3d 的层级归属和 backface-visibility: hidden 的双重施加——它们不是“可选优化”，而是 3D 翻转能成立的硬性前提。变量再方便，也不能碰这两条线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
