translate、rotate、scale プロパティを使用して要素を変換する
CSS transform プロパティ
要素に変換を適用するには、CSS transform プロパティを使用します。このプロパティは、1 つ以上の <transform-function> を受け取り、それらを順番に適用します。
.target { transform: translateX(50%) rotate(30deg) scale(1.2); } ターゲット エレメントは、X 軸で 50% 移動され、30 度回転され、最後に 120% に拡大されます。
transform プロパティは問題なく機能しますが、これらの値を個別に変更する場合は少し面倒です。
ホバー時にスケールを変更するには、値が変更されていなくても、transform プロパティ内のすべての関数を複製する必要があります。
.target:hover { transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */ } 個々の変換プロパティ
Chrome 104 では、CSS 変換の個々のプロパティがリリースされます。プロパティは scale、rotate、translate です。これらのプロパティを使用して、変換の各部分を個別に定義できます。
これにより、Chrome は、すでにこれらのプロパティをサポートしている Firefox と Safari に加わります。
上記の transform の例を個々のプロパティで書き換えると、スニペットは次のようになります。
.target { translate: 50% 0; rotate: 30deg; scale: 1.2; } 順序の重要性
元の CSS transform プロパティと新しいプロパティの主な違いの 1 つは、宣言された変換が適用される順序です。
transform を使用すると、変換関数は記述された順序で左（外側）から右（内側）に適用されます。
個々の変換プロパティの順序は、宣言された順序とは異なります。順序は常に同じです。まず translate（外側）、次に rotate、最後に scale（内側）です。
つまり、次の 2 つのコード スニペットは同じ結果になります。
.transform--individual { translate: 50% 0; rotate: 30deg; scale: 1.2; } .transform--individual-alt { rotate: 30deg; translate: 50% 0; scale: 1.2; } どちらの場合も、対象の要素はまず X 軸方向に 50% だけ移動され、次に 30deg だけ回転され、最後に 1.2 だけ拡大されます。
個々の変換プロパティのいずれかが transform プロパティとともに宣言されている場合、個々の変換が最初に適用され（translate、rotate、scale）、最後に transform が適用されます（内部）。詳細については、変換行列の計算方法を定義する仕様をご覧ください。
アニメーション
これらのプロパティが追加された主な理由は、アニメーションを簡単にするためです。次のように要素をアニメーション化するとします。
transform の使用
transform を使用してこのアニメーションを実装するには、定義されたすべての変換のすべての中間値を計算し、各キーフレームに含める必要があります。たとえば、10% の時点で回転を行うには、transform プロパティにすべての変換値が必要になるため、他の変換の値も計算する必要があります。
生成された CSS コードは次のようになります。
@keyframes anim { 0% { transform: translateX(0%); } 5% { transform: translateX(5%) rotate(90deg) scale(1.2); } 10% { transform: translateX(10%) rotate(180deg) scale(1.2); } 90% { transform: translateX(90%) rotate(180deg) scale(1.2); } 95% { transform: translateX(95%) rotate(270deg) scale(1.2); } 100% { transform: translateX(100%) rotate(360deg); } } .target { animation: anim 2s; animation-fill-mode: forwards; } 個々の変換プロパティを使用する
個々の変換プロパティを使用すると、記述が大幅に簡単になります。すべての変換をキーフレームからキーフレームにドラッグする代わりに、各変換を個別にターゲットに設定できます。また、中間の値をすべて計算する必要もありません。
@keyframes anim { 0% { translate: 0% 0; } 100% { translate: 100% 0; } 0%, 100% { scale: 1; } 5%, 95% { scale: 1.2; } 0% { rotate: 0deg; } 10%, 90% { rotate: 180deg; } 100% { rotate: 360deg; } } .target { animation: anim 2s; animation-fill-mode: forwards; } 個々の変換プロパティと複数のキーフレームを使用する
コードをモジュラー化するには、各サブアニメーションを一連のキーフレームに分割します。
@keyframes move { 0% { translate: 0% 0; } 100% { translate: 100% 0; } } @keyframes scale { 0%, 100% { scale: 1; } 5%, 95% { scale: 1.2; } } @keyframes rotate { 0% { rotate: 0deg; } 10%, 90% { rotate: 180deg; } 100% { rotate: 360deg; } } .target { animation: move 2s, scale 2s, rotate 2s; animation-fill-mode: forwards; } この分割により、個別のプロパティになった transform プロパティが互いにオーバーライドされなくなるため、各キーフレーム セットを自由に適用できるようになります。上記の処理では、すべてを書き換えることなく、各変換に異なるタイミングを指定できます。
パフォーマンス
これらの新しいプロパティを使用するアニメーションは、既存の transform プロパティのアニメーションと同じくらい効率的です。
translate、rotate、scale のアニメーションは、transform のアニメーションと同じようにコンポーザで実行されるため、transform と同じようにアニメーションのパフォーマンスに適しています。
これらの新しいプロパティは、will-change プロパティでも機能します。一般的に、will-change の使用を避けるには、必要な最小数の要素で、可能な限り短い時間だけ使用します。できるだけ具体的に記入することもできます。たとえば、will-change を使用して rotate プロパティと filter プロパティでアニメーションを最適化する場合は、will-change: rotate, filter を使用して宣言する必要があります。これは、rotate と filter をアニメーション化する場合に will-change: transform, filter を使用する場合よりも少し優れています。これは、will-change を使用するときに Chrome が事前に作成するデータ構造の一部が、transform と rotate で異なるためです。