複数の CSS 変換を 1 行で適用する方法と適用の順序は何ですか?

複数の CSS 変換を 1 行で適用する

CSS では、複数の変換を 1 つの要素に同時に適用できます。ただし、複数の変換ディレクティブを指定した場合は、最後の変換ディレクティブのみが適用されます。

複数の変換を 1 行に適用するには、それらをスペースで連結します。

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

順序アプリケーション

複数の変換が右から左に適用されることに注意することが重要です。これは、

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);
}

さまざまな方法で変換を適用すると、違いを観察できます。注文します。

以上が複数の CSS 変換を 1 行で適用する方法と適用の順序は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。