BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】よくある2D変換を5つ実現するCSS

2022-01-21 22:43:58

CSSの2次元変換では、移動、回転、拡大縮小、反りなどの基本的な変形を2次元で行うことができます。変換された要素は、周囲の要素に影響を与えず、重なり合うことができるという点で、絶対位置指定要素と似ていますが、変換された要素が変換前と同じページ上の空間をまだ占めていることを除けば、そのようなことはありません。

2次元の変形は、CSSのtransformプロパティと以下の変換関数で実現できる。

  1. matrix()：6つの値（a, b, c, d, e, f）を持つ変換行列の形式で2D変換を指定します。これは、[a,b,c,d,e,f]の変換行列を直接適用することと等価です。
  2. translate()：オブジェクトをX軸とY軸に沿って平行移動させる。この関数は1〜2個の引数を取り、1個目はX軸に、2個目はY軸に対応する。2個目の引数が与えられない場合、デフォルト値は0である。
  3. translatex()：オブジェクトをX軸（水平）に沿って平行移動させます。
  4. translatey()：オブジェクトをY軸（垂直方向）に沿って平行移動させます。
  5. rotate()：指定したオブジェクトを回転させます。回転角度は関数の引数で指定します。
  6. scale(): オブジェクトを拡大縮小します。この関数には1つまたは2つのパラメータが必要で、第1パラメータはX軸、第2パラメータはY軸に対応し、第2パラメータが提供されない場合は、第1パラメータの値がデフォルトで使用されます。
  7. scalex()：オブジェクトを拡大縮小する（要素の幅を変更する）。
  8. scaley()：オブジェクトを拡大縮小します（要素の高さを変更します）。
  9. skew()：X軸とY軸に沿ってオブジェクトを傾ける。この関数は1または2の引数を取り、最初の引数はX軸に対応し、2番目の引数はY軸に対応する。2番目の引数が与えられない場合、デフォルト値は0です。
  10. skewx()：オブジェクトを（水平）X軸に沿って歪ませる。
  11. skewy()：オブジェクトをY軸（垂直方向）に沿ってワープさせます。

1. トランスレート()

translate()関数は、指定されたパラメータに従って要素を水平方向（X軸）または垂直方向（Y軸）に移動するための関数で、以下のような構文形式を持ちます。

トランスレート(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()関数デモ

また、要素を水平方向に移動させるだけ、あるいは垂直方向に移動させるだけの場合は、translateX() (要素を水平方向に移動させる) や translateY() (要素を垂直方向に移動させる) を使用することができます。translateX()とtranslateY()関数はどちらも1つの引数だけを必要とします、例えば 

translateX(100px); /* equivalent to translate(100px, 0px); */
translateY(10px); /* equivalent to translate(0px, 10px); */

2.回転()

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);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

実行結果は、以下の画像のようになります。

図：Rotate()関数デモ

3. スケール()

scale()関数は、指定した要素を拡大・縮小するための関数であり、その構文は以下の通りです。

スケール(sx, sy)

ここで、sx は水平方向のスケール、sy は垂直方向のスケールである。また、syパラメータは省略可能であり、そのデフォルト値はsxと同じである。

[例】 scale()関数を使用して、指定した要素を拡大縮小する。 

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

実行結果は、以下の画像のようになります。

図：Scale()関数デモ

ヒント：scale()で指定した引数値が-1〜1の範囲外の場合は要素が拡大され、引数値が-1〜1の範囲内の場合は要素が縮小されます。

<スパン translate() 関数と同様に、要素を水平方向のみ、または垂直方向のみに拡大縮小する場合、scaleX() (要素を水平方向に拡大縮小) および scaleY() (要素を垂直方向に拡大縮小) 関数を使用することができます。 

scaleX(0.5); /* is equivalent to scale(0.5, 1); */
scaleY(0.5); /* equivalent to scale(1, 0.5); */

4.スキュー()

skew()関数は、以下の構文形式で、要素を水平方向（X軸）および垂直方向（Y軸）に傾けるために使用します。

skew(ax, ay)

ここで ax は要素の水平方向の傾き、ay は要素の垂直方向の傾きである。また、引数ayは省略可能で、省略した場合のデフォルト値は0である。

[例】skew()関数を使って、指定した要素を反らせる。 

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

実行結果は、以下の画像のようになります。

図：skew()関数のデモ

また、水平方向のみ、または垂直方向のみに要素を歪ませる場合は、skewX() (要素を水平方向に拡大縮小する) および skewY() (要素を垂直方向に拡大縮小する) 関数を使用して行うことも可能です。 

skewX(15deg); /* equivalent to skew(15deg, 0deg); */
skewY(15deg); /* equivalent to skew(0deg, 15deg); */

5.マトリックス()

matrix()関数は、skew(), scale(), rotate(), translate() の省略形と見ることができ、すべての2次元変換は、以下の構文形式を持つ matrix() 関数によって同時に定義することができる。

マトリックス(a, b, c, d, tx, ty)

matrix()関数の6つの引数は、scaleX(), skewY(), scaleY(), translateX(), translateY() 関数に対応しており、matrix()を用いて、以下のような様々な2次元変換操作を実装することが可能です。

  • 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 は水平と垂直の値を deg で表します.

[例題】 matrix()関数を使って、要素に2次元変換を施す。 

<!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()関数デモ <スパン

5つの一般的な2D変換を実現するCSSの記事はこれで終わりです。もっと関連するCSSの2D変換は、スクリプトハウスの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください、今後ともスクリプトハウスを応援していただけると嬉しいです

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します