CSS变量不能直接驱动perspective属性动态重算3D投影矩阵，必须用transform: perspective(var(--dist))与rotateY()等组合，且perspective()须置于旋转函数之前。
perspective 值不能直接用 CSS 变量动态计算透视矩阵
你无法通过 perspective: var(--dist) 让浏览器实时重算 3D 投影矩阵——CSS 的 perspective 属性本身支持变量，但它的作用只是设置一个静态视距；真正决定「翻转时近大远小程度」的，是这个值参与的底层透视投影矩阵（matrix3d）计算。而该矩阵一旦由 transform 生成，就和 perspective 属性解耦了。
想用变量控制 3D 翻转效果，必须走 transform: perspective()
只有 transform: perspective(…) 这种函数式写法，才能和 rotateY() 等组合进同一个 transform 声明里，从而被浏览器当作一个整体变换链处理。这时你才可以用 CSS 变量驱动整个 3D 变换：
-
perspective属性只能加在父容器上，影响所有子元素，且不可与子元素自己的transform动态联动 -
transform: perspective(…)是 transform 函数之一，可与其他函数串联，支持var(--dist)，且作用范围精准到单个元素 - 例如：
transform: perspective(var(--dist)) rotateY(180deg);—— 此时--dist变化，翻转的“纵深感”会实时变化
常见错误：混用 perspective 属性和 transform: perspective()
如果同时在父元素设了 perspective: 1000px，又在子元素写了 transform: perspective(500px) rotateY(180deg)，结果不是叠加或覆盖，而是产生不可预测的双重透视畸变。浏览器会尝试合并两个视点，导致旋转轴偏移、翻转卡顿甚至背面错位。
- 只选一种方式：要么全用父级
perspective+ 子元素纯rotateY，要么全用子元素transform: perspective() rotateY() - 使用
transform: perspective()时，记得把transform-style: preserve-3d加在同一个元素上，否则子元素会被拍平 - 变量值建议限制在
300px～1500px区间；小于200px容易因数值过小导致 Z 轴精度丢失，翻转抖动
实际可运行的变量驱动翻转示例
下面这段代码能让卡片翻转的“立体感”随 CSS 变量实时调节：
立即学习“前端免费学习笔记（深入）”；
div.card {
--dist: 800px;
transform-style: preserve-3d;
transition: transform 0.4s ease;
}
div.card:hover {
transform: perspective(var(--dist)) rotateY(180deg);
}
div.card .front,
div.card .back {
backface-visibility: hidden;
position: absolute;
width: 100%; height: 100%;
}
div.card .back { transform: rotateY(180deg); }
关键点在于：hover 时整条 transform 声明被重算，var(--dist) 改变 → 透视矩阵重生成 → 翻转弧度和缩放比例同步更新。这不是“模拟”，是真实重建 3D 投影空间。
真正容易被忽略的是：perspective() 在 transform 中的位置必须在旋转函数之前，顺序错了（比如写成 rotateY() perspective()）会导致透视失效——因为变换函数执行顺序是从右到左的。
