CSS字符串变量的正确‘null’取值：如何忽略transform变量？

当你想让transform中的CSS变量不产生任何变换，但保留其他transform指令时，直接设置none或空字符串会导致整个transform声明失效——因为transform属性不允许包含无效的语法片段。以下是可行的解决方案：

1. 使用transform的单位矩阵作为“空值” #

transform的单位矩阵matrix(1, 0, 0, 1, 0, 0)是完全无任何变换的标准值，它相当于没有执行任何transform操作，比scale(1)更精准（后者本质上还是执行了缩放变换，只是缩放比例为1）。

修改示例代码如下：

.block-1{
  --turn-amount: matrix(1, 0, 0, 1, 0, 0);
}

2. 利用var()的回退机制，设置空回退值 #

在var()中添加空的回退值，当变量未设置或被重置时，回退值会替换成空，不影响后续的transform指令：

.block{
  --turn-amount: rotate(45deg) rotate(13deg);
  --scale-amount: 3;
  aspect-ratio: 1/1;
  width: 100px;
  background: blue;
  transform: var(--turn-amount, ) scale(var(--scale-amount));
}

.block-1{
  --turn-amount: unset;
}

此时.block-1的transform会被解析为scale(3)，完全生效。

3. 直接不定义目标变量（结合回退值） #

如果不需要保留变量的默认值，可以直接在目标元素中不定义--turn-amount，配合var()的空回退值：

.block{
  --scale-amount: 3;
  aspect-ratio: 1/1;
  width: 100px;
  background: blue;
  transform: var(--turn-amount, ) scale(var(--scale-amount));
}

/* .block-1 不设置--turn-amount变量即可 */

为什么之前的尝试无效？ #

• 设置--transform: none：none是transform的完整取值，当你写transform: none scale(3)时，整个语法违反transform的规则（只能是完整变换列表或none），浏览器会忽略整个transform声明。
• 设置--transform: ""：空字符串会被解析为无效的transform语法，同样导致整个transform声明失效。

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