CSS 2D変換
CSS 2D変換
CSS変換を使用すると、要素を移動、回転、スケーリング、および傾斜させることができます。
下の要素にマウスを合わせると、2D変換が表示されます。
transform
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
財産 |
|||||
---|---|---|---|---|---|
変身 | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
CSS 2D Transformsメソッド
CSSでtransform
プロパティでは、次の2D変換方法を使用できます。
translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()
ヒント:3D変換については、次の章で学習します。
translate()メソッド
のtranslate()
メソッドは、(X軸とY軸に指定されたパラメーターに従って)要素を現在の位置から移動します。
次の例では、<div>要素を現在の位置から右に50ピクセル、下に100ピクセル移動します。
回転()メソッド
のrotate()
メソッドは、指定された角度に従って要素を時計回りまたは反時計回りに回転します。
次の例では、<div>要素を時計回りに20度回転します。
負の値を使用すると、要素が反時計回りに回転します。
次の例では、<div>要素を反時計回りに20度回転します。
scale() メソッド
scale()
のメソッドは、要素のサイズを増減します(幅と高さに指定されたパラメーターに従って)。
次の例では、<div>要素を元の幅の2倍、元の高さの3倍に増やします。
次の例では、<div>要素を元の幅と高さの半分に縮小しています。
scaleX()メソッド
のscaleX()
メソッドは要素の幅を増減します。
次の例では、<div>要素を元の幅の2倍に拡大します。
次の例では、<div>要素を元の幅の半分に縮小しています。
scaleY()メソッド
のscaleY()
メソッドは要素の高さを増減します。
次の例では、<div>要素を元の高さの3倍に増やします。
次の例では、<div>要素を元の高さの半分に減らします。
SkewX()メソッド
のskewX()
メソッドは、指定された角度でX軸に沿って要素を傾斜させます。
次の例では、<div>要素をX軸に沿って20度傾けます。
SkewY()メソッド
のskewY()
メソッドは、指定された角度でY軸に沿って要素を傾斜させます。
次の例では、<div>要素をY軸に沿って20度傾けます。
Skew()メソッド
のskew()
メソッドは、指定された角度でX軸とY軸に沿って要素を傾斜させます。
次の例では、<div>要素をX軸に沿って20度、Y軸に沿って10度傾けます。
2番目のパラメーターが指定されていない場合、値はゼロになります。したがって、次の例では、<div>要素をX軸に沿って20度傾斜させます。
matrix()メソッド
matrix()
のメソッドは、すべての2D変換メソッドを1つに結合します。
matrix()メソッドは、要素の回転、スケーリング、移動(平行移動)、および傾斜を可能にする数学関数を含む6つのパラメーターを受け取ります。
パラメーターは次のとおりです。matrix(scaleX()、skewY()、skewX()、scaleY()、translateX()、translateY())
CSS変換プロパティ
次の表に、すべての2D変換プロパティを示します。
プロパティ |
説明 |
---|---|
transform | 要素に2Dまたは3D変換を適用します |
transform-origin | 変換されたエレメントの位置を変更できます |
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傾斜変換を定義します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。