如何同时使用多个transform属性

在CSS中，如果你想在同一选择器上应用多个`transform`属性，可以按照以下规则组合它们：

1. **顺序规则**：Transforms按添加的顺序生效，从左到右计算。例如，如果你有`rotate(45deg)`和`translateX(50px)`，旋转会先发生，然后是水平平移。

selector {
  transform: rotate(45deg) translateX(50px);
}

2. **运算符**：你可以使用空格分隔不同的transform属性，或者使用逗号`,`。例如：

- 分开写：

     selector {
       transform: rotate(45deg), scale(0.8);
     }

- 使用运算符：

     selector {
       transform: rotate(45deg) scale(0.8);
     }

3. **链式操作**：对于连续变换，如缩放和旋转，可以使用括号组合它们，表示操作的优先级顺序。例如：

   selector {
     transform: (scale(0.8) rotate(45deg)) translateY(50px);
   }

记住，在实际应用中，避免过度使用多个transform属性，因为这可能会导致性能下降，特别是当动画涉及到大量变换时。