ホームページ >ウェブフロントエンド >CSSチュートリアル >複数の CSS 変換を 1 行で適用する方法と適用の順序は何ですか?

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

DDD
DDDオリジナル
2024-12-27 06:29:13964ブラウズ

How to Apply Multiple CSS Transforms in One Line and What's the Order of Application?

複数の 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。