使用 translate、rotate 和 scale 屬性轉換元素
CSS transform 屬性
如要為元素套用轉換，請使用 CSS transform 屬性。該屬性接受一或多個依序套用的 <transform-function>。
.target {
transform: translateX(50%) rotate(30deg) scale(1.2);
}
將目標元素在 X 軸上轉譯 50% 並旋轉 30 度，最後放大為 120%。
雖然 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 進行宣告。比起使用 will-change: transform, filter 製作 rotate 和 filter 動畫的情況，這會比使用 will-change: transform, filter 來得好，因為 Chrome 預先建立的部分資料結構不同於 transform 與 rotate。will-change
新可互通系列的一部分