Individual transform properties (translate, rotate, scale)
従来の transform プロパティでは translate・rotate・scale をまとめて書く必要があったが、個別プロパティとして独立して指定できるようになった。これによりアニメーションの個別制御が容易になり、コードの可読性も向上する。異なるタイミングで各変形を個別にアニメーションさせることも可能。
概要
従来の transform プロパティでは translate・rotate・scale をまとめて書く必要があったが、個別プロパティとして独立して指定できるようになった。これによりアニメーションの個別制御が容易になり、コードの可読性も向上する。異なるタイミングで各変形を個別にアニメーションさせることも可能。
対応ブラウザ
デスクトップ
Chrome 104+
Edge 104+
Safari 14.1+
Firefox 72+
モバイル
Chrome Android 104+
Safari iOS 14.5+
Firefox Android 79+
基本構文
CSS
.card {
translate: 0 0;
rotate: 0deg;
scale: 1;
transition: translate 0.3s ease, rotate 0.5s ease, scale 0.2s ease;
}
.card:hover {
translate: 0 -10px;
rotate: 3deg;
scale: 1.05;
}実務での使いどころ
-
個別タイミングのアニメーション
translate・rotate・scale にそれぞれ異なる duration や delay を設定できる。
-
コードの可読性向上
transform: translateX(10px) rotate(5deg) scale(1.1) のような長い記述を個別プロパティで分かりやすく書ける。
注意点
- transform プロパティと個別プロパティを混在させると予期しない結果になる場合がある。
アクセシビリティ
- 動きのあるトランスフォームには prefers-reduced-motion での無効化を検討する。