Transformで要素を変形、回転する方法

transformプロパティを使用して、HTML要素を回転、拡縮、傾斜、移動する方法

CSSプロパティのtransformは、要素を回転、拡大縮小、傾斜、移動することができます。

変形の種類は、transform-functionを選択して指定します。

今回は、transform-functionを解説します。

transform-*

いくつか関連するCSSプロパティがあります。

• transform …transform-functionを使用して要素を、回転、変形、拡縮させます。
  • perspective …視点距離
  • rotate …回転
  • scale …拡縮
  • skew …歪み
  • translate …移動
  • matrix …行列変換
• transform-box …参照するレイアウトボックスを定義
  • view-box …SVGビューポートを参照します。
  • content-box …コンテンツボックスを参照します。
  • border-box …境界ボックスを参照します。
  • fill-box …バウンディングボックスを参照します。
  • stroke-box …ストロークのバウンディングボックスを参照します。
• transform-origin …変形の原点
  • center
  • top left
  • 50px 50px
  • bottom right 60px …x, y, z
• transform-style …子要素の配置を3Dか2Dかを決める
  • flat …平面化
  • preserve-3d …3次元

transform-function

要素の、距離、回転、拡縮、歪曲、移動を指定します。

複数同時に指定することができます。perspective()がある場合は先頭に置きます。

これらは重ね合わせコンテキストを生成します。

視点距離

• perspective() …視点とz=0との距離

回転

• rotate() …回転
• rotate3d() …3次元回転
• rotateX()
• rotateY()
• rotateZ()

拡大縮小

• scale() …拡縮
• scale3d() …3次元拡縮
• scaleX()
• scaleY()
• scaleZ()

歪み変形 / 斜め変形

• skew() …伸びるようなつぶれるような歪み
• skewX()
• skewY()

位置移動

• translate() …移動
• translate3d() …3次元で移動
• translateX()
• translateY()
• translateZ()

行列変換

• matrix() …拡縮、歪曲、移動の同時
• matrix3d() …拡縮、歪曲、移動の同時

perspective()

視点距離

視点と基準平面(z=0)との距離の定義します。

値は”1px”以上から指定できます。

値が”0″, “マイナス値”の場合は遠近による変形は行われません。

マイナス値は構文エラーです。Z=0平面の向こう側には行けませんでした。

値が”none” の場合は、無限の距離を表し、要素は変形しません。

大きい値（遠い値）に設定しても要素は小さく表示されないようです。

視点に近い要素は大きく表示され、視点の後ろにある要素は表示されません。

要素自体はz軸がマイナスの位置に設置できますが、perspective が0に近づくと、z軸がマイナス座標の要素は小さく表示されます。注意事項

• perspective() …これはCSSの関数
• perspective …これはCSSプロパティ

Code.

transform: perspective(100px);

transform: perspective(none);

Sample

mouse:hoverでperspective(length)の値を2000pxから10pxまで変更します。

空間は15度傾いています。近づくにつれ最後は正面を向くようにしています。

マウスカーソルをboxに重ねてみてください。

傾き

1. このboxのフェイスAはz=-20pxの位置にあります。平面の向こう側です。

perspectiveが小さくなり、視点が近づくとフェイスAは小さく表示されます。

2. このboxは、z軸で正の位置にあります。

perspectiveを小さくすると、boxは次第に大きく表示され、一部は通り過ぎます。

3. このboxも、z軸で正の位置にあります。

perspectiveの値が10pxに近づくと、フェイスA、Bは通り過ぎます。フェイスCはz=3pxなので通り過ぎません。

memo

要素が正のz軸あれば近づくと大きく表示されます。また、perspectiveより後ろの要素は表示されません。

しかし、z軸が負の位置にある要素はperspectiveが0に近づくと、その要素は小さく表示されます。

perspectiveが0に近づくほど遠近感の歪みが強調されるようです。

perspectiveの値が十分に大きい値でも、要素は最初のサイズより小さく表示されないようです。

rotate()

回転します。

回転の中心は、transform-originで変更できます。

回転量はangleで指定。正の値で時計回り。負の値は反時計回り。頂点が0度です。

いくつか単位を指定できます。

• 1deg …度、全円360deg
• 1rad …ラジアン、全円2π、3.14159*2
• 1grad …グラジアン、全円400grad
• 1turn …回転数、全円1turn

角度のメモ

• deg…度。円周を360等分。まぁわかる。
• turn…回転数。円の1周は1回転。まぁわかる。
• rad…ラジアン。1週は2πrad。半円で1πラジアンです。半径と円弧が同じときの角度。1rad=57.2958度です。
• grad…グラジアン。全周で400グラジアン。直角が100。初めて知った。

code.

transform: rotate(45deg);

transform: rotate(calc(3.14159rad / 4));

sample.

頂点を0度とし、右側を正の向きとして回転していく。

skew()

画像を歪めます。引っ張った感じでしょうか。

code.

transform: skew(45deg); /*x*/

skew(x, y)
skew(x)
skewX(x)...skew(x)と同じ
skewY(y)

sample

以下マスカーソルのhoverで変形あり。

scale()

scale()は、対象を拡縮します。

scale(a)
scale(x, y)
scaleX(a)
scaleY(a)
scaleZ(a)
scale3d()

transform: scale(1.2);

transform: scale(1, 0.5);

Sample

matrix()

matrix()

二次元同次変換行列を定義します。

6個のパラメータを使用します。

transform: matrix(a, b, c, d, tx, ty)

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

transform: matrix(1, 0, 0, 1, 0, 0)…変化なしmatrix3d()

16個のパラメータ。4×4 の3次元同次変換行列

code.

引数に単位は指定しません。

matrix(1, 0, 0, 1, 0, 0) ...変形無

matrix(1, 0, 0, 1, 50, 50) ...右下に移動

matrix(1, 0.5, 0.5, 1, 50, 50) ...skew変形

a, d が1の時、b, c, に1を指定すると見えなくなる。

matrix(1, 1, 1, 1, 50, 50) ...skew変形

sample.

参考

transformプロパティ ~ mdn

transform-function ~ mdn

transform-originプロパティ ~ mdn

CSS 座標変換の使用 ~ mdn

CSS Transform …ツール。変形の効果をわかりやすく表示してくれる。

2次元の座標変換 …行列的な説明なやつ。