CSS 2D変換

CSS変換を使用すると、要素を移動、回転、スケーリング、および傾斜させることができます。

下の要素にマウスを合わせると、2D変換が表示されます。

• transform

ブラウザのサポート

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

CSS 2D Transformsメソッド

CSSでtransformプロパティでは、次の2D変換方法を使用できます。

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

translate()メソッド

次の例では、<div>要素を現在の位置から右に50ピクセル、下に100ピクセル移動します。

rotate()メソッド

次の例では、<div>要素を時計回りに20度回転します。

負の値を使用すると、要素が反時計回りに回転します。

次の例では、<div>要素を反時計回りに20度回転します。

scale()メソッド

次の例では、<div>要素を元の幅の2倍、元の高さの3倍に増やします。

次の例では、<div>要素を元の幅と高さの半分に縮小しています。

scaleX()メソッド

次の例では、<div>要素を元の幅の2倍に拡大します。

次の例では、<div>要素を元の幅の半分に縮小しています。

scaleY()メソッド

次の例では、<div>要素を元の高さの3倍に増やします。

次の例では、<div>要素を元の高さの半分に減らします。

SkewX()メソッド

次の例では、<div>要素をX軸に沿って20度傾けます。

SkewY()メソッド

次の例では、<div>要素をY軸に沿って20度傾けます。

Skew()メソッド

次の例では、<div>要素をX軸に沿って20度、Y軸に沿って10度傾けます。

2番目のパラメーターが指定されていない場合、値はゼロになります。したがって、次の例では、<div>要素をX軸に沿って20度傾斜させます。

matrix()メソッド

matrix()メソッドは、要素の回転、スケーリング、移動(平行移動)、および傾斜を可能にする数学関数を含む6つのパラメーターを受け取ります。

パラメーターは次のとおりです。matrix(scaleX()、skewY()、skewX()、scaleY()、translateX()、translateY())

CSS変換プロパティ

次の表に、すべての2D変換プロパティを示します。

CSS 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(角度)	2D回転を定義します｡角度はパラメータで指定されます
skew（x 角度、y 角度)	X軸とY軸に沿った2D傾斜変換を定義します
skewX(角度)	X軸に沿った2D傾斜変換を定義します
skewY(角度)	Y軸に沿った2D傾斜変換を定義します