CSS3プロパティを変換します
例
回転div要素：
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
»をお試しください
ブラウザのサポート
表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。
すぐにデジタル-webkit-を以下、-ms-またはプレフィックスのサポートに前-moz-は最初のブラウザのバージョン番号を属性。
| 属性 | |||||
|---|---|---|---|---|---|
| transform (2D) | 36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
23.0 15.0 -webkit- 10.5 -o- |
| transform (3D) | 36.0 12.0 -webkit- |
12.0 | 10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
属性の定義と指示
図2Dは、プロパティを要素または3D変換に適用されます。 このプロパティは、要素がというように、ズーム、移動、傾きを回転させると、にことができます。
優れた変換特性を理解するために、参照オンラインインスタンスを 。
| デフォルト： | なし |
|---|---|
| 継承： | いいえ |
| バージョン： | CSS3 |
| JavaScriptシンタックス： | .style.transformオブジェクト=「回転（7deg）」 |
文法
変換：なし|変換関数を、
| 値 | 説明 |
|---|---|
| なし | 定義は変換されません。 |
| 行列（N、N、N、N、N、N） | 6つの値の行列を使用して、2D変換を定義します。 |
| Matrix3D（N、N、N、N、N、N、N、N、N、N、N、N、N、N、N、N） | 3D変換は、16個の値4×4行列を使用して定義されました。 |
| （x、y）の変換 | 2D変換を定義します。 |
| translate3d（X、Y、Z） | 3D変換を定義します。 |
| 移動X（x）は、 | 変換の定義が、X軸の値を有します。 |
| 移動Y（Y） | 変換の定義が、Y軸の値を有します。 |
| translateZ（Z） | しかし、Z軸の値を持つ、3D変換を定義します。 |
| スケール（のx [、y]は？） | 2Dスケール変換を定義します。 |
| scale3d（X、Y、Z） | 3Dスケール変換を定義します。 |
| scaleXプロパティ（x）は、 | X軸の値を設定することにより、スケール変換を定義します。 |
| scaleYの（Y） | スケール変換を定義するY軸の値を設定すること。 |
| scaleZ（Z） | Z軸の値を設定することにより、3次元スケール変換を定義します。 |
| （角度）を回転させます | 2Dは引数に所定の角度を回転定義します。 |
| rotate3dを（X、Y、Z、角度） | 3D回転を定義します。 |
| 回転X（角度） | 3D Xは、シャフトに沿って定義されます。 |
| 回転Y（角度） | 3D Y軸は回転に沿って定義されます。 |
| 回転Z（角度） | 3DのZ軸が回転に沿って定義されます。 |
| スキュー（X-角、y軸の角度） | 2DのX及びY軸スキュー変換に沿って定義されました。 |
| skewX値（角度） | 2DのX軸は、変換の傾斜に沿って定義されます。 |
| skewY（角度） | Y軸スキュー変換2Dに沿って定義されます。 |
| 視点（N） | 3D変換素子は、透視図を定義します。 |
より多くの例
画像を回転させます
この例では、「ポラロイド」の写真を作成し、画像を回転させる方法を示しています。