Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
アニメーション Widely available

2D transforms

2D変形はtranslate()、rotate()、scale()、skew() などの関数を使用して、要素の視覚的な位置や形状を変更します。レイアウトに影響を与えずに要素を移動・変形できるため、アニメーションやインタラクティブな効果に最適です。matrix() 関数で任意の2D変形も指定可能です。

2D変形トランスフォーム

概要

2D変形はtranslate()、rotate()、scale()、skew() などの関数を使用して、要素の視覚的な位置や形状を変更します。レイアウトに影響を与えずに要素を移動・変形できるため、アニメーションやインタラクティブな効果に最適です。matrix() 関数で任意の2D変形も指定可能です。

対応ブラウザ

デスクトップ

Chrome 36+
Edge 12+
Safari 9+
Firefox 16+

モバイル

Chrome Android 36+
Safari iOS 9+
Firefox Android 16+

基本構文

CSS 
.rotate { transform: rotate(45deg); }
.scale { transform: scale(1.5); }
.move { transform: translate(50px, 20px); }
.combined { transform: rotate(10deg) scale(1.2); }

実務での使いどころ

  • ホバーエフェクト

    ボタンやカードにホバー時の拡大・回転アニメーションを追加し、インタラクティブなフィードバックを提供します。

注意点

  • transform はレイアウトフローに影響しないため、変形後の要素が他の要素と重なる場合は手動で調整が必要です。

アクセシビリティ

  • transform で要素を移動させても、スクリーンリーダーのフォーカス順序は変わりません。視覚的な位置とフォーカス順序の不一致に注意してください。

参考リンク