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

小编典典

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

css

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

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

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

阅读 239

2020-05-16

共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>

2020-05-16