应用多个 CSS 变换
CSS 变换允许开发人员以各种方式操作元素，包括平移、旋转和缩放。但是，当对一个元素应用多个变换时，通常只执行最后一个变换。
问题：
在以下示例中，未应用平移变换，因为旋转变换放在之后它：
li:nth-child(2) {
transform: rotate(15deg);
transform: translate(-20px,0px);
}解决方案：
要应用多个变换，它们必须放在一行上，并用空格分隔。变换将从右到左应用：
li:nth-child(2) {
transform: rotate(15deg) translate(-20px,0px);
}因此，将首先应用旋转变换，然后是平移。
执行顺序：
应用多个变换时，变换的顺序很重要。例如，将元素旋转 90 度，然后将其缩放 1.5 度，与先缩放然后旋转它不会产生相同的结果。
考虑以下演示：
.orderOne, .orderTwo {
font-family: sans-serif;
font-size: 22px;
color: #000;
display: inline-block;
}
.orderOne {
transform: scale(1, 1.5) rotate(90deg);
}
.orderTwo {
transform: rotate(90deg) scale(1, 1.5);
}中在此示例中，“.orderOne”将显示旋转 90 度并缩放 1.5，而“.orderTwo”将显示旋转 90 度，然后缩放1.5.这表明变换顺序很重要，在应用多个变换时必须仔细考虑。
以上是如何正确应用多个 CSS 转换？的详细内容。更多信息请关注PHP中文网其他相关文章！
