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

複数の CSS 変換の適用

CSS 変換を使用すると、開発者は、変換、回転、スケーリングなどのさまざまな方法で要素を操作できます。ただし、要素に複数の変換を適用する場合、通常は最後の変換のみが実行されます。

問題:

次の例では、変換変換は適用されません。回転変換は後に配置されますそれ:

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

解決策:

複数の変換を適用するには、それらをスペースで区切って 1 行に配置する必要があります。変換は右から左の順に適用されます:

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

したがって、回転変換が最初に適用され、次に変換が続きます。

実行順序:

複数の変換を適用する場合、変換の順序が重要になります。たとえば、要素を 90 度回転してから 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);
}

Inこの例では、「.orderOne」は 90 度回転されて 1.5 倍に拡大されて表示され、「.orderTwo」は 90 度回転されて表示されます。 1.5倍に拡大しました。これは、変換順序が重要であり、複数の変換を適用する場合は慎重に考慮する必要があることを示しています。

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