无需JavaScript：如何连续复用CSS变量实现嵌套元素多重Transform效果？

当然有不需要JavaScript的解决方案！我来给你讲个巧妙的CSS技巧，完美解决你想复用同一个变量实现多重transform的需求。

首先得搞懂你原来写法的问题：当子元素重新定义--scale: -1时，它会直接覆盖父级继承来的--scale: 0.8，所以最终子元素的transform只有scale(-1)，自然丢失了父级的缩放效果。

那怎么让子元素同时用上父级和自己的变换呢？核心思路是利用CSS变量的继承特性，在子元素的变量中先引用父级的变量值，再追加新的变换。

下面是具体实现：

方案一：通过变量叠加变换函数 #

先调整你的CSS，让transform接受一个可以包含多个变换函数的变量：

p {
  /* 默认使用scale(1)，如果有自定义变量就用变量里的所有变换 */
  transform: var(--transform, scale(1));
}

然后在嵌套结构里，父元素定义基础变换，子元素在父级变换的基础上追加自己的变换：

<div style="--transform: scale(0.8)">
  <p style="--transform: var(--transform) scale(-1);">Hello</p>
</div>

原理说明 #

当子元素定义--transform时，var(--transform)会先获取父级继承过来的scale(0.8)，然后再拼接上子元素自己的scale(-1)，最终子元素的transform属性会解析成：

transform: scale(0.8) scale(-1);

这样就同时应用了父级的缩放和子级的翻转，文本尺寸也能正常显示啦。

这种方法还能扩展到其他transform函数，比如旋转、平移，非常灵活：

<div style="--transform: scale(0.8) rotate(10deg)">
  <p style="--transform: var(--transform) translate(20px) scale(-1);">Hello</p>
</div>

方案二：用变量传递单个变换参数（可选） #

如果你还是想单独控制缩放值，也可以借助缩放的乘法特性实现叠加：

p {
  transform: scale(calc(var(--scale, 1) * var(--parent-scale, 1)));
}

父元素设置--parent-scale: 0.8，子元素设置--scale: -1，最终等效于缩放0.8 * -1 = -0.8。不过这个方案本质还是用了两个变量，灵活性不如第一种，所以更推荐前者。

总结一下，第一种方案完全符合你的需求：复用同一个变量名，纯CSS实现多重transform叠加，不需要任何JavaScript。

内容的提问来源于stack exchange，提问作者math