CSS3 2D 変換

CSS3 変換

CSS3 変換は、要素の移動、拡大縮小、回転、引き伸ばし、または変形を行うことができます。

CSS3 Transforms

どのように機能するのか？

変換の効果は、要素の形状、サイズ、位置を変更することです。

2D または 3D 変換を使用して要素を変換できます。

マウスを以下の要素に移動して、2D および 3D 変換の効果を確認してください：

2D 変換
3D 変換

ブラウザサポート

表内の数字は、そのプロパティをサポートする最初のブラウザバージョン番号を示します。

-webkit-、-ms-、-moz- の直前にある数字は、そのプレフィックス付きプロパティをサポートする最初のブラウザバージョン番号です。

プロパティ
transform 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 3.2 -webkit- 23.0
15.0 -webkit-
12.1
10.5 -o-
transform-origin
(two-value syntax)		 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 3.2 -webkit- 23.0
15.0 -webkit-
12.1
10.5 -o-

Internet Explorer 10、Firefox、Opera は transform プロパティをサポートしています。

Chrome と Safari は -webkit- プレフィックス付きのバージョンが必要です。

注意：Internet Explorer 9 は -ms- プレフィックス付きのバージョンが必要です。

2D 変換

この章では、2D 変換メソッドについて学びます：

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()

次の章では、3D 変換について学びます。

OperaSafariChromeFirefoxInternet Explorer

例

div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ }

試してみる »

translate() メソッド

Translate

translate() メソッドは、左（X 軸）と上（Y 軸）の位置で指定されたパラメータに従って、現在の要素の位置から移動します。

OperaSafariChromeFirefoxInternet Explorer

例

div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ }

試してみる »

translate 値（50px, 100px）は、要素を左から 50 ピクセル、上から 100 ピクセル移動します。

rotate() メソッド

Rotate

rotate() メソッドは、指定された角度で要素を時計回りに回転させます。負の値も許可されており、その場合は要素が反時計回りに回転します。

OperaSafariChromeFirefoxInternet Explorer

例

div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ }

試してみる »

rotate 値（30deg）は、要素を時計回りに 30 度回転させます。

scale() メソッド

Scale

scale() メソッドは、幅（X 軸）と高さ（Y 軸）のパラメータに応じて、要素のサイズを拡大または縮小します：

OperaSafariChromeFirefoxInternet Explorer

例

-ms-transform:scale(2,3); /* IE 9 */ -webkit-transform: scale(2,3); /* Safari */ transform: scale(2,3); /*標準構文*/

試してみる »

scale（2,3）は、幅を元のサイズの 2 倍に、高さを元のサイズの 3 倍に変換します。

skew() メソッド

構文

transform:skew(<angle> [,<angle>]);

2 つのパラメータ値を含み、それぞれ X 軸と Y 軸の傾斜角度を表します。2 番目のパラメータが空の場合はデフォルトで 0 になり、パラメータが負の場合は反対方向に傾斜します。

  • skewX(<angle>); は X 軸（水平方向）のみで傾斜することを示します。
  • skewY(<angle>); は Y 軸（垂直方向）のみで傾斜することを示します。
OperaSafariChromeFirefoxInternet Explorer

例

div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ }

試してみる »

skew(30deg,20deg)要素はX<code>X</code> 軸と <code>Y</code>Y軸上で 20 度 30 度傾斜します。

matrix() メソッド

Rotate

matrix() メソッドは、2D 変換メソッドを 1 つにまとめたものです。

matrix メソッドには 6 つのパラメータがあり、回転、拡大縮小、移動（平行移動）、傾斜の機能が含まれています。

OperaSafariChromeFirefoxInternet Explorer

例

matrix() メソッドを使用して div 要素を 30° 回転させます

div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ }

試してみる »

新しい変換プロパティ

以下にすべての変換プロパティを示します：

Property 説明 CSS
transform 2D または 3D 変換に適用される要素 3
transform-origin 変換された要素の位置を変更できます 3

2D 変換メソッド

関数 説明
matrix(n,n,n,n,n,n) 6 つの値の行列を使用して 2D 変換を定義します。
translate(x,y) X 軸と Y 軸に沿って要素を移動する 2D 変換を定義します。
translateX(n) X 軸に沿って要素を移動する 2D 変換を定義します。
translateY(n) Y 軸に沿って要素を移動する 2D 変換を定義します。
scale(x,y) 要素の幅と高さを変更する 2D スケール変換を定義します。
scaleX(n) 要素の幅を変更する 2D スケール変換を定義します。
scaleY(n) 要素の高さを変更する 2D スケール変換を定義します。
rotate(angle) パラメータで角度を指定する 2D 回転を定義します。
skew(x-angle,y-angle) X 軸と Y 軸に沿った 2D スキュー変換を定義します。
skewX(angle) X 軸に沿った 2D スキュー変換を定義します。
skewY(angle) Y 軸に沿った 2D スキュー変換を定義します。
その他の拡張