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

複数の CSS プロパティによる要素の変換

CSS では、要素に複数の変換を適用できます。ただし、transform プロパティを複数回使用する場合は、最後のディレクティブのみが有効になります。複数の変換を適用するには、それらを 1 行に結合する必要があります。

例:

次の CSS では、変換のみが要素に適用されます。

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

両方の変換を適用するには、それらを 1 つに結合します。 line:

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

変換の順序

単一行に適用される複数の変換は右から左に処理されます。これは、右端の変換が最初に適用されることを意味します。

次の例を考えてみましょう:

transform: scale(1, 1.5) rotate(90deg);

transform: rotate(90deg) scale(1, 1.5);

これら 2 つの変換は、次の理由により同じ結果を生成しません。アプリケーションの順序が異なります。

以上が要素に複数の CSS 変換を適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。