如何在 CSS 中应用多个变换？

小编典典

如何在 CSS 中应用多个变换？

all

使用 CSS，我如何应用多个transform？

示例：在下文中，仅应用了平移，而不应用了旋转。

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}

阅读 131

2022-03-03

共1个答案

小编典典

您必须像这样将它们放在一行中：

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

当您有多个转换指令时，只会应用最后一个。就像任何其他 CSS 规则一样。

请记住，从右到左应用 多个变换一行指令。

这：transform: scale(1,1.5) rotate(90deg);
和：transform: rotate(90deg) scale(1,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);

}


<div class="orderOne">

  A

</div>



<div class="orderTwo">

  A

</div>

2022-03-03