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 |
(有) | 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 接頭辞付きの形を既定のものの別名として対応しています。