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 プロパティと新しいプロパティの主な違いの一つは、宣言された変換が適用される順序です。
transform を使用すると、変換関数は、左（外側）から右（内側）に記述される順序で適用されます。
個々の変換プロパティを使用する場合、宣言の順序とは逆の順序ではありません。順序は常に同じで、最初に translate（外側）、rotate、scale（内側）の順になります。
つまり、以下のどちらのコード スニペットでも結果は同じになります。
.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 で異なるためです。