CodeGym/コース/Frontend SELF JA/トランスフォームの基本

トランスフォームの基本

使用可能

1.1 プロパティ transform

CSSトランスフォームを使うと、ドキュメントのフローを変えずに要素の位置、サイズ、回転、傾きを変えることができるよ。インタラクティブでダイナミックなウェブインターフェースを作るための強力なツールだね。transformtranslaterotatescaleskewを使ったトランスフォームの基本を見てみよう。

transformプロパティは、二次元と三次元のトランスフォームを要素に適用するためのものだよ。translaterotatescaleskewなどのさまざまなトランスフォーム関数を組み合わせて使えるんだ。

構文:

element {
  transform: transformation-function;
}

ここで:

  • transformation-function: 要素に適用されるトランスフォーム関数

使用例:

CSS
.element {
  transform: translate(50px, 100px);
}

1.2 トランスフォーム translate

translateトランスフォームは、要素をX軸と/またはY軸に沿って移動させるために使われるよ。

構文:

element {
  transform: translate(x, y);
}

ここで:

  • x: X軸のシフト(負の値または正の値が可能)
  • y: Y軸のシフト(負の値または正の値が可能)

例:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>トランスフォーム translate</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: transform 0.5s;
      }

      .box:hover {
        transform: translate(50px, 50px);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

コードの説明:

  • .box: 固定サイズと色の要素
  • .box:hover: 要素にマウスを重ねるとtranslate(50px, 50px)トランスフォームが適用され、右と下に50ピクセル移動するよ

1.3 トランスフォーム rotate

rotateトランスフォームは、要素をその中心を基準に回転させるために使われるよ。

構文:

element {
  transform: rotate(angle);
}

ここで:

  • angle: 回転角度(度数法、負の値または正の値が可能)

例:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>トランスフォーム rotate</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #e74c3c;
        transition: transform 0.5s;
      }

      .box:hover {
        transform: rotate(45deg);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

コードの説明:

  • .box: 固定サイズと色の要素
  • .box:hover: 要素にマウスを重ねるとrotate(45deg)トランスフォームが適用され、時計回りに45度回転するよ

1.4 トランスフォーム scale

scaleトランスフォームは、要素のサイズをX軸と/またはY軸に沿って変更するために使われるよ。

構文:

element {
  transform: scale(sx, sy);
}

ここで:

  • sx: X軸のスケール(1より大きいと拡大、1より小さいと縮小)
  • sy: Y軸のスケール(1より大きいと拡大、1より小さいと縮小)

例:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>トランスフォーム scale</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #2ecc71;
        transition: transform 0.5s;
      }

      .box:hover {
        transform: scale(1.5, 1.5);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

コードの説明:

  • .box: 固定サイズと色の要素
  • .box:hover: 要素にマウスを重ねるとscale(1.5, 1.5)トランスフォームが適用され、両軸で1.5倍に拡大するよ

1.5 トランスフォーム skew

skewトランスフォームは、要素をX軸と/またはY軸に沿って傾けるために使われるよ。

構文:

element {
  transform: skew(ax, ay);
}

ここで:

  • ax: X軸の傾斜角度(負の値または正の値が可能)
  • ay: Y軸の傾斜角度(負の値または正の値が可能)
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>トランスフォーム skew</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #9b59b6;
        transition: transform 0.5s;
      }

      .box:hover {
        transform: skew(20deg, 10deg);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

コードの説明:

  • .box: 固定サイズと色の要素。
  • .box:hover: 要素にマウスを重ねるとskew(20deg, 10deg)トランスフォームが適用され、X軸で20度、Y軸で10度傾くよ。

1.6 複数のトランスフォームの結合

transformプロパティでは、複数のトランスフォーム関数を組み合わせて使用することで、複雑なエフェクトを得ることができるんだ。

例:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>結合されたトランスフォーム</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: transform 0.5s;
      }

      .box:hover {
        transform: translate(50px, 50px) rotate(45deg) scale(1.5) skew(20deg, 10deg);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

コードの説明:

  • .box: 固定サイズと色の要素
  • .box:hover: 要素にマウスを重ねるとtranslaterotatescaleskewトランスフォームが同時に適用され、複雑なエフェクトが生まれるよ
1
タスク
Frontend SELF JA,  レベル 23レッスン 0
ロック未解除
要素の移動
要素の移動
1
タスク
Frontend SELF JA,  レベル 23レッスン 0
ロック未解除
要素の拡大
要素の拡大
コメント
  • 人気
  • 新規
  • 古い
コメントを残すには、サインインしている必要があります
このページにはまだコメントがありません