如何正确应用多个 CSS 转换？

应用多个 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中文网其他相关文章！