[解決済み] CSSで複数のtransformを適用するには？

質問

CSSを使用して、どのように複数の transform ?

例 以下では、並進のみ適用し、回転は適用しない。

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

解決方法は？

このように1行にまとめなければなりません。

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

複数のtransformディレクティブを指定した場合、最後に指定したものだけが適用されます。これは他のCSSルールと同じです。

複数の変形1行ディレクティブを覚えておくことは 右から左へ適用 .

これです。 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>