css 多个transform

在CSS中，您可以同时应用多个transform属性来对元素进行多个变换效果。您可以通过以下方式将多个transform属性组合在一起：

.element {
  transform: translateX(100px) rotate(45deg) scale(1.5);
}

在上面的例子中，`.element`类的元素将应用三个transform效果：

1. `translateX(100px)`：将元素沿着X轴平移100像素。
2. `rotate(45deg)`：将元素顺时针旋转45度。
3. `scale(1.5)`：将元素缩放为原来的1.5倍大小。

您还可以使用其他的transform函数，例如`translateY()`、`rotateX()`、`rotateY()`、`skewX()`、`skewY()`等等，以及它们的组合。

请注意，transform属性的顺序很重要，因为它们按照从左到右的顺序依次应用于元素。所以，在上面的例子中，先进行平移，然后旋转，最后缩放。

如果您需要在不同的CSS规则中应用不同的transform效果，您可以使用逗号分隔它们：

.element {
  transform: translateX(100px), rotate(45deg), scale(1.5);
}

这样，每个transform效果都会独立应用于元素。

多个transform属性的组合使得您可以在CSS中实现更复杂的元素变换效果，通过调整不同的transform函数和参数，可以创建出各种不同的动画和效果。