Individual transform properties (translate, rotate, scale)
rotate は CSS のプロパティで、 transform とは個別に独立して回転変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 transform の値で座標変換関数を指定する実際の順序を覚えておく手間を軽減します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 104 | 104 | 72 | 14.1 | 104 | 14.5 | |
none | 104 | 104 | 72 | 14.1 | 104 | 14.5 |
x y z angle x、y、または z 軸の名前と角度の値 | 104 | 104 | 72 | 14.1 | 104 | 14.5 |
| scale は CSS のプロパティで、transform とは個別に独立しての変倍の座標変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 transform の値で座標変換関数を指定する実際の順序を思い出す手間を軽減します。 | 104 | 104 | 72 | 14.1 | 104 | 14.5 |
none | 104 | 104 | 72 | 14.1 | 104 | 14.5 |
| translate は CSS のプロパティで、平行移動の座標変換を独自に、 transform プロパティから独立して指定することができます。これは一般的なユーザーインターフェイスの用途に適しており、 transform の値で指定する変換関数を正確に思い出す必要がなくなります。 | 104 | 104 | 72 | 14.1 | 104 | 14.5 |
none | 104 | 104 | 72 | 14.1 | 104 | 14.5 |
基本構文
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 個別指定
Individual transform properties (translate, rotate, scale) の translate 個別指定 パターンです。
プレビュー全画面表示
rotate 個別指定
Individual transform properties (translate, rotate, scale) の rotate 個別指定 パターンです。
プレビュー全画面表示
実務での使いどころ
-
個別タイミングのアニメーション
translate・rotate・scale にそれぞれ異なる duration や delay を設定できる。
-
コードの可読性向上
transform: translateX(10px) rotate(5deg) scale(1.1) のような長い記述を個別プロパティで分かりやすく書ける。
注意点
- transform プロパティと個別プロパティを混在させると予期しない結果になる場合がある。
アクセシビリティ
- 動きのあるトランスフォームには prefers-reduced-motion での無効化を検討する。