Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

2D transforms

transform は CSS のプロパティで、与えられた要素を回転、拡大縮小、傾斜、移動することできます。 これは、 CSS の視覚整形モデルの座標空間を変更します。

このプロパティに none とは異なる値が設定されていると、重ね合わせコンテキストが作成されます。 この場合、その要素はその中に含まれる position: fixed; または position: absolute; であるすべての要素の包含ブロックとして扱われます。

同時に、個々の座標変換プロパティ、translate、rotate、scale も使用できます。これらのプロパティが適用される順番は、translate、rotate、scale、そして最後に transform です。

警告: 座標変換可能な要素のみが transform の対象になります。 これは、レイアウトが CSS ボックスモデルによって管理される、置換要素でないインラインボックス、表の列ボックス、表の列グループボックスを除くすべての要素です。

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

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
transform
36
12
16
9
36
9
その他
css.properties.transform-origin

transform-origin は CSS のプロパティで、要素の座標変換 (transform) における原点を設定します。
36
12
16
9
36
9
CSS プロパティ
bottom
1
12
3.5
2
18
1
center
1
12
3.5
2
18
1
left
1
12
3.5
2
18
1
right
1
12
3.5
2
18
1
three value syntax

3 つの値の構文
12
12
10
5
18
3.2
top
1
12
3.5
2
18
1
none
1
12
3.5
3.1
18
3.2
その他
css.types.angle

は CSS のデータ型で、度、グラード、ラジアン、周の値で表される角度の値を表します。例えば、 gradient 関数や一部の transform 関数などで使われています。
2
12
3.6
4
18
3.2
css.types.angle-percentage

は CSS のデータ型で、 angle または percentage が取りうる値を表します。
2
12
3.6
4
18
3.2
CSS タイプ
deg
2
12
3.6
4
18
3.2
grad
2
12
3.6
4
18
3.2
rad
2
12
3.6
4
18
3.2
turn
2
12
13
4
18
3.2
その他
css.types.position

は CSS のデータ型で、 2 次元の座標を表し、要素ボックスからの相対的な位置を示すために用いられます。 background-position, object-position, mask-position, offset-position, offset-anchor, transform-origin で使用されています。
1
12
1
1
18
1
CSS タイプ
four value syntax

任意のエッジからのオフセットの 4 つの値の構文
25
12
13
7
25
7
keyword value syntax

キーワードと `<length>` または `<percentage>` を組み合わせた構文
1
12
1
1
18
1
その他
css.types.transform-function

は CSS のデータ型で、要素の外見に影響する座標変換を表します。座標変換関数は、 2D または 3D 空間で要素を回転、拡大縮小、歪曲、移動させることができます。これは transform プロパティの中で使用されます。
1
12
3.5
3.1
18
3.2
CSS タイプ
matrix

matrix() は CSS の関数で、二次元同次変換行列を定義します。結果は &lt;transform-function&gt; データ型になります。
1
12
3.5
3.1
18
3.2
rotate

rotate() は CSS の関数で、要素を二次元平面上の特定の点を中心に、形を崩さずに回転させる座標変換を定義します。結果は &lt;transform-function&gt; データ型になります。
1
12
3.5
3.1
18
3.2
scale

scale() は CSS の関数で、二次元平面上における拡縮する座標変換を定義します。変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は &lt;transform-function&gt; データ型になります。
1
12
3.5
3.1
18
3.2
scaleX

scaleX() は CSS の関数で、要素を X 軸に沿って (水平に) 変倍する座標変換を定義します。結果は &lt;transform-function&gt; データ型になります。
1
12
3.5
3.1
18
3.2
scaleY

scaleY() は CSS の関数で、要素を Y 軸に沿って (垂直に) 変倍する座標変換を定義します。結果は &lt;transform-function&gt; データ型になります。
1
12
3.5
3.1
18
3.2
skew

skew() は CSS 関数で、要素を 2D 平面上でゆがめる変換を定義します。結果は &lt;transform-function&gt; データ型になります。
1
12
3.5
3.1
18
3.2
skewX

skewX() は CSS の関数で、要素を 2D 平面上で水平方向にゆがめる変換を定義します。結果は &lt;transform-function&gt; データ型になります。
1
12
3.5
3.1
18
3.2
skewY

skewY() は CSS の関数で、要素を 2D 平面上で垂直方向にゆがめる変換を定義します。結果は &lt;transform-function&gt; データ型になります。
1
12
3.5
3.1
18
3.2
translate

translate() は CSS の関数で、要素を水平方向や垂直方向で再配置します。結果は &lt;transform-function&gt; データ型になります。
1
12
3.5
3.1
18
3.2
translateX

translateX() は CSS の関数で、要素を二次元平面上の水平方向で再配置します。結果は &lt;transform-function&gt; データ型になります。
1
12
3.5
3.1
18
3.2
translateY

translateY() は CSS の関数で、要素を二次元平面上の垂直方向で再配置します。結果は &lt;transform-function&gt; データ型になります。
1
12
3.5
3.1
18
3.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (49)
  • ベンダープレフィックス付きで対応: -moz- (3.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3.1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (3.2)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (49)
  • ベンダープレフィックス付きで対応: -moz- (3.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (2)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
実装メモ
  • Firefox 16 より前では、`matrix()` の変換値は、標準の `<number>` に加えて `<length>` にすることもできました。
注釈 1件
削除済み
  • Firefox 14 では `skew()` の実験的サポートが削除されましたが、Firefox 15 では再導入されました。

基本構文

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

ライブデモ

Rotate Rotate

CSS Rotate rotate demo.

プレビュー全画面表示

Scale Scale

CSS Scale scale demo.

プレビュー全画面表示

Skew Skew + Move

CSS Skew skew + move demo.

プレビュー全画面表示

実務での使いどころ

  • ホバーエフェクト

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

注意点

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

アクセシビリティ

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

参考リンク