CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのtransformプロパティで要素に2D・3D変換を適用する方法

CSSでは、transformプロパティを使うことで、HTML要素に2Dまたは3Dの変換（トランスフォーム）を簡単に適用できます。回転、移動、拡大縮小、傾斜など、さまざまな視覚効果をJavaScriptに頼らず純粋なCSSだけで実現できるのが大きな魅力です。

transformプロパティの基本的な使い方

最もシンプルな例として、rotate()関数を使って要素を回転させる方法を見てみましょう。以下のコードでは、グレーのdiv要素が時計回りに10度回転して表示されます。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 200px;
  height: 100px;
  background-color: gray;
  transform: rotate(10deg);
}
</style>
</head>
<body>
<h1>Rotation（回転）</h1>
<div>Demo</div>
</body>
</html>

このように、transformプロパティに関数とその引数（角度や距離など）を指定するだけで、要素の見た目を変化させられます。

主な2D変換関数

  • rotate(角度) … 要素を回転させます。単位はdeg（度）を使用します。
  • translate(x, y) … 要素をX軸・Y軸方向に移動させます。
  • scale(x, y) … 要素を拡大・縮小します。1が元のサイズです。
  • skew(x, y) … 要素を傾斜（スキュー）させます。
  • matrix() … 上記すべての変換を行列形式で一括指定します。

3D変換を使うには

3D変換を行いたい場合は、rotateX()、rotateY()、rotateZ()、translate3d()などの関数を使用します。また、親要素にperspectiveプロパティを設定すると、奥行きのある立体的な表現が可能になります。

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

覚えておくと便利なポイント

  • transform-origin：変換の基準点を変更できます。デフォルトは要素の中心です。
  • 複数の変換の組み合わせ：transform: translate(20px, 10px) rotate(15deg) scale(1.2); のように、関数をスペース区切りで並べると同時に適用されます。
  • transitionとの併用：transitionプロパティと組み合わせれば、滑らかなアニメーション効果を実現できます。

transformプロパティは、すべてのモダンブラウザでサポートされており、レイアウトに影響を与えずにGPUアクセラレーションを活用できるため、パフォーマンス面でも優れた手法です。ぜひ活用してみてください。

  1. CSSアニメーションで要素を円形の軌道上に移動させる方法

    CSSアニメーションを活用すると、rotate（回転）とtranslate（平行移動）を組み合わせることで、要素をさまざまな方法で動かすことができます。 本記事では、このテクニックを応用して、要素を円形の軌道（サーキュラーパス）に沿って移動させる方法を解説します。 円形移動の仕組み ポイントは、@keyframesの中で以下の3つの変換を組み合わせることです。 rotate()：要素を回転させ、移動する向きを決める translateX()：回転させた方向へ要素を押し出し、中心からの距離を作る rotate()（逆回転）：要素自体の傾きを打ち消し、常に直立した状態を保つ アニメーションの進

  2. CSS offset-path（モーションパス）を使って要素を円形パス上に移動させる方法

    CSSでは、offset-pathプロパティを使用することで、要素にモーションパス（移動経路）を定義できます。このプロパティを活用すると、要素を指定したパスに沿ってアニメーションさせることが可能です。構文CSS offset-pathプロパティの基本的な構文は以下のとおりです。Selector { offset-path: /*値*/ }offset-pathとoffset-distanceの組み合わせoffset-pathは単独では機能せず、通常offset-distanceプロパティと組み合わせて使用します。offset-distanceは、パスの始点からどの位置まで進んだかをパー