CSS 変換 - 移動、回転、拡大縮小、傾斜

レクチャー 12: CSS 変換 – 移動、回転、拡大縮小、傾斜

「基礎から輝きへ」 コースの 12 番目の講義へようこそ。今日は、要素の位置、サイズ、方向を操作できる強力な機能である CSS Transforms について説明します。 translation()、rotate()、scale()、skew() などの変換関数の基本について説明します。

---

1.変換プロパティの概要

transform プロパティを使用すると、移動、回転、拡大縮小、傾斜などのさまざまな変換を要素に適用できます。これらの変換は、要素の元の位置を基準にして適用されます。

• 構文:

  transform: transform-function(value);

---

2.翻訳

translate() 関数は、要素を元の位置から X 軸と Y 軸に沿って移動します。値はピクセル (px)、パーセンテージ (%)、またはその他の単位で指定できます。

• 例: 要素を右に 50 ピクセル、下に 30 ピクセル移動します。

  .box {
    transform: translate(50px, 30px);
  }

この例では、.box 要素は元の位置から右に 50 ピクセル、下に 30 ピクセル移動します。

---

3.回転

rotate() 関数は、固定点 (デフォルトでは要素の中心) を中心に要素を回転します。回転角度は度 (deg) で指定します。

• 例: 要素を 45 度回転します。

  .box {
    transform: rotate(45deg);
  }

この場合、.box 要素は中心を中心に時計回りに 45 度回転します。

---

4.スケール

scale() 関数は要素のサイズを変更します。 X 軸と Y 軸のスケール係数を指定できます。値 1 は要素の元のサイズを意味し、値が 1 より大きいか小さいと、それぞれサイズが増加または減少します。

• 例: 要素を元のサイズの 1.5 倍に拡大縮小します。

  .box {
    transform: scale(1.5);
  }

この例では、.box 要素は元のサイズの 150% まで拡大されます。

---

5.スキュー

skew() 関数は、X 軸と Y 軸に沿って要素を傾けます。角度は度 (deg) で指定します。

• 例: 要素を X 軸に沿って 20 度、Y 軸に沿って 10 度傾けます。

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

この場合、.box 要素は水平方向に 20 度、垂直方向に 10 度傾斜します。

---

6.変換関数の組み合わせ

単一の変換プロパティで複数の変換関数を組み合わせることができます。関数は、表示される順序で適用されます。

• 例: 移動、回転、拡大縮小を組み合わせます。

  .box {
    transform: translate(50px, 30px) rotate(45deg) scale(1.5);
  }

この例では:

• .box は最初に平行移動され、次に回転され、最後に拡大縮小されます。各変換は順番に適用されます。

---

7.変換原点

transform-origin プロパティは、変換が発生する周囲の点を指定します。デフォルトでは、これは要素の中心ですが、任意の点に変更できます。

• 例: 変換の原点を左上隅に変更します。

  .box {
    transform-origin: top left;
    transform: rotate(45deg);
  }

この場合、.box は中心ではなく左上隅を中心に 45 度回転します。

---

8. 3D 変換

CSS は 3D 変換もサポートしています。 3D 効果を作成するには、perspective()、rotateX()、rotateY()、translateZ() などの関数を使用できます。

• 例: 遠近感を追加して 3D 効果を作成します。

  .container {
    perspective: 1000px;
  }

  .box {
    transform: rotateY(45deg);
  }

この例では:

• .container 要素は遠近感を提供し、.box が 3D 空間で回転しているように見えます。

---

練習演習

1. CSS 変換を使用してカードをめくるアニメーションを作成します。ホバーするとカードが 180 度回転し、裏面が表示されます。
2. 移動、回転、拡大縮小を組み合わせて、要素に独自の効果を作成してみてください。

---

次のステップ: 次の講義では、CSS アニメーション について詳しく説明し、Web 要素に動的なアニメーション効果を作成する方法を学びます。動きのあるデザインに命を吹き込む準備をしましょう!

---

LinkedIn でフォローしてください -

リドイ・ハサン

以上がCSS 変換 - 移動、回転、拡大縮小、傾斜の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。