How to have multiple CSS transitions on an element?

在CSS中，要在一个元素上应用多个转换，我们可以使用transform属性，并通过空格分隔每个转换函数。transform属性允许我们使用多种转换命令，如rotate(), translate(), scale()等，来同时对元素进行操作。

具体示例：

假设你有一个按钮，你想让它在悬停时旋转45度并同时放大1.5倍，你可以这样编写CSS：

css
.button {
  transition: transform 0.3s ease;
}

.button:hover {
  transform: rotate(45deg) scale(1.5);
}

代码解释：

1. .button类：这个类应用于你的按钮。它包含一个transition属性，指定transform应该在0.3秒内平滑过渡，使用ease作为过渡的时序函数。

2. :hover伪类：当鼠标悬停在按钮上时，transform属性将会被触发，执行以下转换：

   • rotate(45deg)：将按钮顺时针旋转45度。
   • scale(1.5)：将按钮的大小放大到原始尺寸的1.5倍。

这两个转换函数在一个声明中通过空格分隔开，它们将按照书写的顺序被应用到元素上。这是进行多个CSS转换的一个简单而有效的例子。