CSS/変形関連

変形関連

この章では、CSSの変形（Transform）関連のプロパティについて解説します。変形を利用すると、要素を回転、拡大縮小、傾斜、移動させることができ、よりダイナミックなデザインを作ることが可能です。

変形の基本

CSSの変形は、transform プロパティを使用して指定します。以下は主な変形の種類です。

• translate(): 要素を指定した距離だけ移動します。
• rotate(): 要素を指定した角度だけ回転させます。
• scale(): 要素を拡大または縮小します。
• skew(): 要素を指定した角度で傾斜させます。

以下は例です。

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

この例では、要素を右に50px、下に100px移動し、45度回転させ、1.5倍に拡大しています。

変形関連プロパティ

以下は、変形に関連するプロパティの一覧です。

• transform: 変形の種類とその値を指定します。
• transform-origin: 変形の基準点を指定します（デフォルトは要素の中心）。
• perspective: 3D空間における遠近効果を指定します。
• backface-visibility: 要素の裏面の表示/非表示を指定します。

3D変形

CSSでは、2Dだけでなく3D変形もサポートされています。以下は3D変形の例です。

.cube {
  transform: rotateX(45deg) rotateY(45deg);
  transform-style: preserve-3d;
}

この例では、要素をX軸とY軸で回転させ、3D空間内での表示を維持しています。

応用例

ホバー時の変形

.button {
  transition: transform 0.3s ease;
}

.button:hover {
  transform: scale(1.1) rotate(5deg);
}

この例では、ボタンにホバーしたときに拡大し、少し回転するエフェクトを追加しています。

遠近感のある変形

.scene {
  perspective: 800px;
}

.card {
  transform: rotateY(30deg);
  transform-origin: center;
}

この例では、遠近効果を加えた3D変形を適用しています。

まとめ

CSSの変形機能を使用することで、要素を動的に操作し、インタラクティブなデザインを実現できます。2Dおよび3D変形を組み合わせることで、視覚的に魅力的な表現が可能です。変形を使用する際は、パフォーマンスやユーザー体験にも配慮してください。