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

Question

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

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

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

Answer 1

你必须把它们放在一条线上，像这样：

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

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

请记住，多个transform one line指令是从右到左应用的。

此:转换：缩放（1,1.5）旋转（90度）；
和:转换：旋转（90度）缩放（1,1.5）；

不会产生相同的结果：

null

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