CSS 変形 (CSS Transforms) は CSS のモジュールの一つで、 CSS でスタイル付けされた要素をどのように二次元または三次元空間に変形できるかを定義します。

リファレンス

プロパティ

データ型

ガイド

CSS 変形の利用
CSS でスタイル付けされた要素をどのように変形するかについての手順を追ったチュートリアルです。

仕様書

仕様書 状態 備考
CSS Transforms Level 1 草案 初回定義。

ブラウザーの対応

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本対応

(有) -webkit
36

(有) 3.5 (1.9.1)-moz[1]
16.0 (16.0)[2]
9.0-ms[3]
10.0
10.5-o
12.10
15.0-webkit
23
3.1-webkit
3D 対応 12.0-webkit
36
(有) 10.0-moz
16.0 (16.0)
10.0 15.0-webkit
23
4.0-webkit
機能 Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本対応 2.1-webkit[4] (有)-webkit (有) (有) (有)
11.0-webkit[5]
11.5-webkit 3.2 (有)-webkit
3D 対応 3.0-webkit (有)-webkit (有) (有) (有) 22-webkit 3.2 (有)-webkit

[1] Gecko 14.0 は skew() の実験的な対応を打ち切りましたが、互換性の面から Gecko 15.0 で再導入しました。これは標準外であり、将来削除される予定なので、使用しないでください。

[2] Firefox 16 より前は、 matrix() 及び matrix3d() の変換値が標準の <number> に加えて <length> にすることができました。

[3] Internet Explorer 5.5 以降では、同様の効果を達成するために独自の Matrix Filter に対応しています。

Internet Explorer 9.0 以前は 3D 変形、 3D と 2D を混合した変形関数に対応していません。 -ms-transform:rotate(10deg) translateZ(0); のようなものは、プロパティ全体が適用されません。

[4] Android 2.3 には、コンテナー要素に -webkit-transform があると、入力フォームへの入力中に「ジャンプ」するというバグがあります。

[5] Internet Explorer 11.0 は -webkit 接頭辞付きの形を既定のものの別名として対応しています。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Sebastianz, fscholz
最終更新者: mfuji09,