CSS2D変換
CSS2D変換
CSS変換を使用すると、要素を移動、回転、拡大縮小、および傾斜させることができます。
下の要素にマウスを合わせると、2D変換が表示されます。
この章では、次のCSSプロパティについて学習します。
transform
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
| Property | |||||
|---|---|---|---|---|---|
| transform | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
CSS2D変換メソッド
CSStransformプロパティを使用すると、次の2D変換方法を使用できます。
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
ヒント：次の章では、3D変換について学習します。
translate（）メソッド
このtranslate()メソッドは、要素を現在の位置から移動します（X軸とY軸に指定されたパラメーターに従って）。
次の例では、<div>要素を現在の位置から50ピクセル右に、100ピクセル下に移動します。
例
div
{
transform: translate(50px, 100px);
}
rotate（）メソッド
このrotate()メソッドは、指定された次数に従って要素を時計回りまたは反時計回りに回転させます。
次の例では、<div>要素を時計回りに20度回転させます。
例
div
{
transform: rotate(20deg);
}
負の値を使用すると、要素が反時計回りに回転します。
次の例では、<div>要素を反時計回りに20度回転します。
例
div
{
transform: rotate(-20deg);
}
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);
}
スキューX（）メソッド
このskewX()メソッドは、指定された角度だけX軸に沿って要素を傾斜させます。
次の例では、<div>要素をX軸に沿って20度傾斜させています。
例
div
{
transform: skewX(20deg);
}
スキューY（）メソッド
このskewY()メソッドは、指定された角度だけY軸に沿って要素を傾斜させます。
次の例では、<div>要素をY軸に沿って20度傾斜させます。
例
div
{
transform: skewY(20deg);
}
スキュー（）メソッド
このskew()メソッドは、指定された角度だけX軸とY軸に沿って要素を傾斜させます。
次の例では、<div>要素をX軸に沿って20度、Y軸に沿って10度傾斜させます。
例
div
{
transform: skew(20deg, 10deg);
}
2番目のパラメーターが指定されていない場合、値はゼロになります。したがって、次の例では、<div>要素をX軸に沿って20度傾斜させます。
例
div
{
transform: skew(20deg);
}
matrix（）メソッド
このmatrix()メソッドは、すべての2D変換メソッドを1つに結合します。
matrix（）メソッドは、数学関数を含む6つのパラメーターを取ります。これにより、要素の回転、スケーリング、移動（移動）、および傾斜が可能になります。
パラメータは次のとおりです：matrix（scaleX（）、skewY（）、skewX（）、scaleY（）、translateX（）、translateY（））
例
div
{
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
CSS変換プロパティ
次の表に、すべての2D変換プロパティを示します。
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
CSS2D変換メソッド
| Function | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element's width |
| scaleY(n) | Defines a 2D scale transformation, changing the element's height |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |