TECH I.S.

CSS 2D変換


CSS 2D変換

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

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

2D回転

この章では、次のCSSプロパティについて学習します。
  • 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

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

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

div{  transform: translate(50px, 100px); }

自分で試してみる»


回転()メソッド

Rotaterotate()メソッドは、指定された角度に従って要素を時計回りまたは反時計回りに回転します。

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

div{   transform: rotate(20deg); }

自分で試してみる»

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

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

div{  transform: rotate(-20deg); }

自分で試してみる»



scale() メソッド

Scale
scale()のメソッドは、要素のサイズを増減します(幅と高さに指定されたパラメーターに従って)。

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

div{  transform: scale(2, 3); }

自分で試してみる»

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

div{  transform: scale(0.5, 0.5); }

自分で試してみる»


scaleX()メソッド

scaleX()メソッドは要素の幅を増減します。

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

div{  transform: scaleX(2); }

自分で試してみる»

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

div{  transform: scaleX(0.5); }

自分で試してみる»


scaleY()メソッド

scaleY()メソッドは要素の高さを増減します。

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

div{  transform: scaleY(3); }

自分で試してみる»

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

div{  transform: scaleY(0.5); }

自分で試してみる»


SkewX()メソッド

skewX()メソッドは、指定された角度でX軸に沿って要素を傾斜させます。

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

div{  transform: skewX(20deg); }

自分で試してみる»


SkewY()メソッド

skewY()メソッドは、指定された角度でY軸に沿って要素を傾斜させます。

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

div{  transform: skewY(20deg); }

自分で試してみる»


Skew()メソッド

skew()メソッドは、指定された角度でX軸とY軸に沿って要素を傾斜させます。

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

div{  transform: skew(20deg, 10deg); }

自分で試してみる»

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

div{  transform: skew(20deg); }

自分で試してみる»


matrix()メソッド

Rotate matrix()のメソッドは、すべての2D変換メソッドを1つに結合します。

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

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

div{   transform: matrix(1, -0.3, 0, 1, 0, 0); }

自分で試してみる»


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傾斜変換を定義します


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細