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

CSS 2D変換入門！transformプロパティで実現する移動・回転・拡大縮小・傾斜の使い方

Webデザインにおいて、アニメーションする要素を作ることは重要な機能の一つです。例えば、ユーザーがボタンにマウスカーソルを乗せたとき（ホバー時）にボタンを傾けたいといったケースがあるでしょう。

そんなときに役立つのがCSSのtransformプロパティです。transformプロパティを使うと、Webページ上の要素を移動・回転・傾斜（スキュー）・拡大縮小できます。これにより、よりインタラクティブなWebページを実現できます。

この記事では、サンプルコードとともにCSSのtransformプロパティを使った2D変換の方法を解説します。読み終える頃には、CSS 2D変換を使いこなせるようになっているはずです。

CSS 2D変換とは

CSSのtransform関数を使うと、回転・移動・拡大縮小・傾斜といった基本的な変換アニメーションをWebページ上で作成できます。

要素が変換されても、周囲の要素には影響しません。ただし、変換された要素は元の位置のスペースを保持したまま、他の要素と重なることがあります。

CSSの変換には「2D」と「3D」の2種類があります。どちらもtransformプロパティで作成しますが、この記事では2D変換に焦点を当てて解説します。

CSSでWeb要素に適用できる主な2D変換は以下の通りです。

  • translate()
  • scale()
  • scaleX()
  • scaleY()
  • skew()
  • skewX()
  • skewY()
  • matrix()
  • rotate()

それでは、それぞれの変換について例を挙げながら詳しく見ていきましょう。

translate()による移動

translate()メソッドは、要素を現在の位置から画面上の新しい位置へ移動させるために使います。

translate()関数は2つの引数を受け取ります。1つ目は要素を右方向に移動させるピクセル数、2つ目は下方向に移動させるピクセル数です。

構文は以下の通りです。

translate(xAxis, yAxis);

例えば、ボックスを現在の位置から右に25px、下に50px移動させたいとします。その場合、次のようなコードで実現できます。

index.html

<body>
	<p>これはテキストの段落です。</p>
<div><p>translate()メソッドで移動したボックスです。</p></div>
</body>

styles.css

div {
	transform: translate(25px, 50px);
	background-color: lightblue;
	border: 3px solid black;
}

コードの解説をしましょう。HTMLでは2つの段落を作成しています。最初の段落はページの上部に表示され、2つ目の段落は<div>タグで囲まれ、最初の段落の下に配置されます。

CSSでは<div>タグに適用されるスタイルを定義しています。背景色を水色（lightblue）に設定し、幅3pxの黒い実線の枠線を付けています。さらにtranslate()変換を使って、ボックスを右に25px、下に50px移動させています。

参考として、translate()を指定しなかった場合のコードは以下の通りです。

index.html

<body>
	<p>これはテキストの段落です。</p>
<div><p>translate()メソッドで移動したボックスです。</p></div>
</body>

styles.css

div {
	background-color: lightblue;
	border: 3px solid black;
}

ご覧のとおり、translate()メソッドを指定しなければ、ボックスはWebページ上の通常の位置に留まります。

rotate()による回転

rotate()変換を使うと、要素を時計回りまたは反時計回りに回転できます。回転の角度は指定した度数（deg）の値に基づきます。

rotate()変換の構文は以下の通りです。

transform: rotate(Xdeg);

Xには要素を回転させたい角度を指定します。時計回りに回転したい場合は正の値、反時計回りに回転したい場合は負の値を指定します。

例えば、ボックスを45度回転させたい場合は、次のようなコードを使います。

index.html

<div><p>回転されたボックスです。</p></div>

styles.css

div {
	transform: rotate(45deg);
	background-color: lightblue;
	border: 3px solid black;
}

コードの解説です。HTMLではテキストを含む<div>ボックスを作成しています。CSSではボックスに水色の背景と幅3pxの黒い実線の枠線を適用し、さらに<div>ボックスを時計回りに45度回転させています。

実行結果を見ると、ボックスが回転していることがわかります。回転前と回転後の比較は以下の画像の通りです。

CSS 2D変換入門！transformプロパティで実現する移動・回転・拡大縮小・傾斜の使い方

scale()による拡大縮小

scale()メソッドを使うと、要素のサイズを拡大または縮小できます。

scale()メソッドの構文は以下の通りです。

transform: scale(x, y);

scale関数は、指定した値に基づいて要素の幅（x）と高さ（y）を比例的にスケールします。高さの倍率を指定しない場合、幅と同じ倍率が自動的に適用されます。

例えば、ボックスを元のサイズの1.5倍に拡大したい場合は、次のようなコードを使います。

index.html

<div><p>拡大縮小されたボックスです。</p></div>

styles.css

div {
	transform: scale(1.5, 1.5);
	background-color: lightblue;
	border: 3px solid black;
}

HTMLでは文章を含むボックスを作成しています。CSSではすべての<div>タグに水色の背景と幅3pxの黒い実線の枠線を指定し、scale()メソッドを使ってボックスを元のサイズの1.5倍に拡大しています。

以下は、2つのボックスのサイズを比較した画像です。小さい方のボックスはscale()の値が未指定、大きい方のボックスはscale()が1.5に設定されています。

CSS 2D変換入門！transformプロパティで実現する移動・回転・拡大縮小・傾斜の使い方

テキストを含む大きい方のボックスは、元のボックスのちょうど1.5倍のサイズになっています。

scaleX()による横方向の拡大縮小

scaleX()変換を使うと、要素の幅だけを拡大・縮小できます。scaleX()の構文は以下の通りです。

transform: scaleX(xValue);

xValueは要素の幅を拡大縮小する倍率です。例えば、ボックスの幅を1.5倍にしたい場合は、次のようなコードを使います。

index.html

<div><p>拡大縮小されたボックスです。</p></div>

styles.css

div {
	transform: scaleX(1.5);
	background-color: lightblue;
	border: 3px solid black;
}

この例では、ボックスの幅が元の1.5倍に拡大されています。

scaleY()による縦方向の拡大縮小

scaleY()変換を使うと、要素の高さだけを拡大・縮小できます。scaleY()の仕組みはscaleX()と同じですが、幅ではなく高さに影響する点が異なります。

例えば、ボックスの高さを現在の半分に縮小したい場合は、次のようなコードを使います。

index.html

<div><p>拡大縮小されたボックスです。</p></div>

styles.css

div {
	transform: scaleY(0.5);
	background-color: lightblue;
	border: 3px solid black;
}

このコードでは、ボックスの高さ（y軸）を0.5倍に縮小しています。つまり、ボックスの高さは元の半分になります。

skew()による傾斜

skew()変換は、指定した角度に従って要素をx軸とy軸に沿って傾斜させます。

skew()メソッドの構文は以下の通りです。

transform: skew(xValue, yValue);

xValueはx軸方向への傾斜角度、yValueはy軸方向への傾斜角度を表します。どちらの値も度数（deg）で指定します。

yValueを指定しない場合、y軸方向には傾斜が適用されません。

例えば、ボックスをx軸方向に10度、y軸方向に15度傾斜させたい場合は、次のようなコードを使います。

index.html

<div><p>傾斜させたボックスです。</p></div>

styles.css

div {
	transform: skew(10deg, 15deg);
	background-color: lightblue;
	border: 3px solid black;
}

この例では、ボックスをx軸方向に10度、y軸方向に15度傾斜させています。

skewX()とskewY()による傾斜

scale()メソッドと同様に、skew()にもx軸またはy軸のどちらか一方に沿って要素を傾斜させるためのサブメソッドが用意されています。

x軸のみに沿って要素を傾斜させるにはskewX()メソッドを使います。構文は以下の通りです。

transform: skewX(xValue);

xValueはx軸方向に傾斜させる角度です。

y軸に沿って要素を傾斜させるにはskewY()メソッドを使います。構文は以下の通りです。

transform: skewY(yValue);

例えば、要素をy軸方向に10度傾斜させたい場合は、次のようなコードを使えます。

div {
	transform: skewY(10deg);
}

matrix()による一括変換

matrix()変換は、CSSのすべての2D変換を一度に適用できるメソッドです。つまり、matrix()を使えばtranslate（移動）、rotate（回転）、scale（拡大縮小）、skew（傾斜）の変換をまとめて指定できます。

matrix()関数は6つの引数を受け取ります。構文は以下の通りです。

transform: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

例えば、以下の変換を適用したボックスを作りたいとします。

  • x軸の拡大率：1
  • y軸の傾斜：10度
  • x軸の傾斜：10度
  • y軸の拡大率：1.25
  • x軸方向の移動：25px
  • y軸方向の移動：25px

これらの変換を個別に指定することもできますが、その場合は多くの変換を別々に書く必要があります。代わりにmatrix()メソッドを使えば、1行のコードでこれらの変換をまとめて記述できます。

上記の変換を持つボックスを作成するコードは以下の通りです。

index.html

<div><p>傾斜させたボックスです。</p></div>

styles.css

div {
	transform: matrix(1, 10, 10, 1.25, 25, 25);
	background-color: lightblue;
	border: 3px solid black;
}

このコードでは、matrix()メソッドに先ほど指定した値を渡すことで、ボックスに傾斜・拡大縮小・移動の変換をまとめて適用しています。

まとめ

transformプロパティは、CSSで要素に変換を適用するために使われるプロパティです。CSSには、skew（傾斜）、scale（拡大縮小）、rotate（回転）、translate（移動）など、さまざまな2D変換が用意されています。

この記事では、サンプルコードを交えながらCSS 2D変換の基本を解説しました。これであなたも、プロのWeb開発者のように独自の2D変換を作成できるはずです。

  1. CSSのrotate()関数の使い方 – 要素を回転させる方法を解説

    CSSのrotate()関数とは？CSSのrotate()関数は、要素を回転させるための変換関数です。transformプロパティと組み合わせて使用し、指定した角度だけ要素を回転させることができます。引数には回転角度を指定します。単位はdeg（度）やrad（ラジアン）などが利用可能で、正の値を指定すると時計回りに、負の値を指定すると反時計回りに回転します。指定できる角度の単位deg（度）：360degで1回転rad（ラジアン）：約6.28rad（2π）で1回転grad（グラード）：400gradで1回転turn（回転数）：1turnで1回転使用例以下の例では、複数の段落要素を表示し、そのうちの

  2. CSSの2D変換関数（transform）とは？rotate・translate・scale・skewの使い方

    CSSの2D変換関数は、要素に対して回転・移動・拡大縮小・傾斜といった2次元の変換効果を適用するために使用されます。これらの関数を活用することで、JavaScriptなどに頼らずCSSだけで動きのあるデザインやアニメーション表現を手軽に実装できます。 主な2D変換関数の一覧 translate() － 要素をX軸・Y軸方向に移動させます。 scale() － 要素をX軸・Y軸方向に拡大または縮小します。 rotate() － 要素を指定した角度だけ回転させます。 skew() － 要素をX軸・Y軸方向に傾斜させます。 各関数の基本構文 translate(x, y)：指定した距離（px