ホーム プログラミング言語 Web関連 css3 CSS 2D 変換 (5 フォーム)

CSS 2D 変換 (5 フォーム)

 
 
CSS の 2D 変換を使用すると、移動、回転、拡大縮小、変形など、2 次元空間でいくつかの基本的な変換操作を実行できます。変換された要素は絶対配置要素に似ており、周囲の要素には影響しませんが、周囲の要素の重なりと比較すると、変換された要素がページ上の変換前のスペースを占有するという違いがあります。

 

2D 変換は、CSS の transform プロパティと次の変換関数を使用して実現できます。

  • matrix(): 6 つの値 (a、b、c、d、e、f) を含む変換行列の形式で 2D 変換を指定します。これは、a [a、b、c、 d, e, f ] 変換行列。
  • translate(): オブジェクトを X 軸と Y 軸に沿って平行移動します. この関数は 1~2 個のパラメータを提供する必要があります. 最初のパラメータは X 軸に対応し, 2 番目のパラメータは Y 軸に対応します. 2 番目のパラメーターは指定されていません。デフォルト値は 0 です。
  • translatex(): オブジェクトを X 軸 (水平方向) に沿って移動します。
  • translatey(): オブジェクトを Y 軸 (垂直方向) に沿って平行移動します。
  • rotate（）：指定されたオブジェクトを回転させます。回転角度は関数のパラメータで指定できます。
  • scale(): オブジェクトのスケーリング. この関数は 1~2 個のパラメータを提供する必要があります. 最初のパラメータは X 軸に対応し, 2 番目のパラメータは Y 軸に対応します. 2 番目のパラメータが提供されない場合, 1 番目のパラメータが取得されます.デフォルト値;
  • scalex(): オブジェクトをスケーリングします (要素の幅を変更します);
  • scaley(): オブジェクトをスケーリングします (要素の高さを変更します);
  • skew(): X 軸と Y 軸に沿ってオブジェクトを傾斜させます. この関数は 1~2 個のパラメータを提供する必要があります. 最初のパラメータは X 軸に対応し、2 番目のパラメータは Y 軸に対応します. 2 番目のパラメーターが指定されていない場合、デフォルト値は 0 です。
  • skewx(): X 軸 (水平方向) に沿ってオブジェクトをゆがめます。
  • skewy(): Y 軸 (垂直方向) に沿ってオブジェクトをゆがめます。
コンテンツ 表示

1. translate()

translate() 関数は、指定されたパラメータに従って、要素を水平 (X 軸) または垂直 (Y 軸) 方向に移動するために使用されます。関数の構文は次のとおりです。

translate(tx, ty)

このうち、tx は要素の横 (X 軸) 方向の移動距離に対応し、ty は要素の縦 (Y 軸) 方向の移動距離に対応し、パラメータ ty は無視できます (デフォルトは 0) で、両方のパラメーターが負の値になる場合があります。

【例】translate()関数で指定要素を移動する：

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            transform: translate(100px, 10px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

実行結果は次の図のとおりです。

図: translate() 関数のデモ
図: translate() 関数のデモ

要素を水平方向または垂直方向に移動するだけの場合は、translateX() (要素を水平方向に移動) または translateY() (要素を垂直方向に移動) も使用できます。 1 つのパラメーターを指定します。たとえば、次のようになります。

translateX(100px); /* translate(100px, 0px); と同じ */
translateY(10px); /* translate(0px, 10px); と同じ */

2. rotate()

rotate() 関数は、指定された角度に従って要素を回転させるために使用されます. 関数の構文は次のとおりです:

rotate(a)

パラメータ a は要素を回転させる角度を示します。a が正の場合は時計回りの回転を意味し、a が負の場合は反時計回りの回転を意味します。

【例】rotate()関数を使って要素を回転させる：

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            margin: 20px 0px 0px 20px;
            transform: rotate(45deg); /* 45度回転させる */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

実行結果は次の図のとおりです。

図: Rotate() 関数のデモ
図: Rotate() 関数のデモ

3.scale()

scale() 関数は、指定された要素をスケーリング (拡大または縮小) するために使用されます. 関数の構文は次のとおりです:

scale(sx,sy)

このうち、ｓｘは横方向の倍率、ｓｙは縦方向の倍率を表す。さらに、パラメーター sy は省略でき、そのデフォルト値は sx に等しくなります。

【例】 scale()関数を使用して、指定した要素をスケーリングします。

 <!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            transform: scale(0.7);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

実行結果は次の図のとおりです。

図: scale() 関数のデモ
図: scale() 関数のデモ

ヒント: scale() で指定されたパラメーター値が -1~1 の範囲外の場合、要素は拡大され、パラメーター値が -1~1 の範囲内の場合、要素は縮小されます。

translate() 関数と同様に、要素のサイズを水平方向のみまたは垂直方向のみにスケーリングする場合は、scaleX() (要素を水平方向にスケーリングする) および scaleY() を使用することもできます。 （要素を垂直方向にスケーリングする）機能。 scaleX() および scaleY() 関数は、1 つのパラメーターのみを提供する必要があります。次に例を示します。

scaleX(0.5); /* scale(0.5, 1) と同じ; */
scaleY(0.5); /* scale(1, 0.5) と同じ; */

4.skew()

Skew() 関数は、水平方向 (X 軸) および垂直方向 (Y 軸) に沿って要素を傾斜および歪曲するために使用されます。関数の構文は次のとおりです。

skew(ax, ay)

このうち、パラメータａｘは素子の横方向の歪み角を表し、パラメータｙは素子の縦方向の歪み角を表す。さらに、パラメータ y は省略できます。パラメータ ay を省略した場合、デフォルト値は 0 です。

【例】skew()関数で指定要素を歪ませる：

 <!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            margin: 20px 0px 0px 10px;
            transform: skew(-15deg, 20deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

実行結果は次の図のとおりです。

図:skew()関数のデモ
図:skew()関数のデモ

または、要素を水平方向のみまたは垂直方向のみに歪ませる場合は、skewX() (要素を水平方向に拡大縮小) および skewY() (要素を垂直方向に拡大縮小) 関数を使用することもできます。 SkewX() および skewY() 関数は、1 つのパラメーターのみを提供する必要があります。次に例を示します。

skewX(15deg); /* skew(15deg, 0deg) と同じ; */
SkewY(15deg); /* skew(0deg, 15deg) と同じ; */

5.マトリックス()

matrix() 関数は、skew()、scale()、rotate()、translate() などのいくつかの関数の省略形と見なすことができます. matrix() 関数を使用すると、すべての 2D 変換操作を同時に定義できます関数の構文は次のとおりです。

matrix(a, b, c, d, tx, ty)

matrix() 関数の 6 つのパラメーターは、それぞれ scaleX()、skewY()、skewX()、scaleY()、translateX()、translateY() の関数に対応しており、matrix() を使用してさまざまな 2D を実現できます。次のようなアクション:

  • translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty); tx と ty は水平方向と垂直方向の平行移動値です。
  • rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0); a は度単位の値です。 sin(a) と -sin(a) の値を交換することで、回転を逆にすることができます。
  • scale(sx, sy) = matrix(sx, 0, 0, sy, 0 ,0);ここで、sx と sy は水平方向と垂直方向のスケーリング値です。
  • skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0 ,0); ax と ay は水平および垂直の値 (度) です。

[例] matrix() 関数を使用して、要素に対して 2D 変換操作を実行します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            margin: 20px 0px 0px 10px;
            float: left;
        }
        .one {
            transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
        }
        .two {
            margin-left: 35px;
            transform: matrix(0.586, 0.8, -0.8, 0.686, 0, 0);
        }
        .three {
            margin-left: 40px;
            margin-top: 25px;
            transform: matrix(0.586, 0.8, -0.8, 0.866, 0, 0);
        }
        .four {
            transform: matrix(0.586, 0.8, -0.8, 0.586, 40, 30);
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</body>
</html>

実行結果は次の図のとおりです。

図: matrix() 関数のデモ
図: matrix() 関数のデモ
 

「CSS 2D 変換 (5 フォーム)」についてわかりやすく解説！絶対に観るべきベスト2動画

Learn CSS In Arabic 2021 – #69 – 2D Transform – Matrix
https://www.youtube-nocookie.com/watch?v=OsypTHsvnVI&pp=ygUkQ1NTIDJEIOWkieaPmyAoNSDjg5Xjgqnjg7zjg6ApJmhsPUpB

最新記事一覧

関連記事一覧