☰

CSS で複数の変換を適用するにはどうすればいいですか? 質問する

tag-icon • tag-icon css css-transforms
CSS で複数の変換を適用するにはどうすればいいですか? 質問する

CSS を使用して、複数の を適用するにはどうすればよいですかtransform?

例: 以下では、回転ではなく、移動のみが適用されます。

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

ベストアンサー1

次のように 1 行にまとめる必要があります。

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

複数の変換ディレクティブがある場合は、最後のディレクティブのみが適用されます。これは他の 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>

おすすめ記事