CSSリファレンス
transformの意味と使い方
「transform」を使うと、要素のボックスに2次元または3次元の変形効果を適用できます。
2次元変形では横(x軸)と縦(y軸)の方向に関して、移動、拡大・縮小、回転、傾斜の変形効果を適用できます。
3次元変形では、横(x軸)、縦(y軸)、ブラウザ画面に垂直(z軸)の方向に関して、移動、拡大・縮小、回転の変形効果を適用し、透視図法(遠近法)で表現できます。
各変形効果を半角スペースで区切って記述すれば、複数の効果を適用できます。その場合は、先に指定したものから適用されます。指定する順番によって効果が変わることがあります。
値の指定方法
none
変形効果を適用しません。
translate(x軸方向の距離, y軸方向の距離)
要素を移動させます。x軸方向とy軸方向の移動距離を、それぞれ「実数値+単位」または「パーセント値+%」で指定します。値を1つだけ指定した場合は、y軸方向の移動距離に「0」を指定したものとみなされます。
translate3d(軸x方向の距離, y軸方向の距離, z軸方向の距離)
要素を移動させます。x軸方向とy軸方向の移動距離を、「実数値+単位」または「パーセント値+%」で、z軸方向の移動距離を「実数値+単位」で指定します。zの値にパーセント値は指定できません。zの値が大きくなるほど要素の位置が手前になります。
translateX(x方向の距離)
要素をx軸方向へ移動させます。移動距離を「実数値+単位」または「パーセント値+%」で指定します。
translateY(y方向の距離)
要素をy軸方向へ移動させます。移動距離を「実数値+単位」または「パーセント値+%」で指定します。
translateZ(z方向の距離)
要素をz軸方向へ移動させます。移動距離を「実数値+単位」で指定します。パーセント値は指定できません。zの値が大きくなるほど要素の位置が手前になります。
scale(x方向の倍率, y方向の倍率)
要素を拡大または縮小させます。x軸方向とy軸方向に拡大・縮小させる倍率を、それぞれ標準のサイズを1とした単位なしの実数値で指定します。値を1つだけ指定した場合は、x軸方向とy軸方向へ同じ倍率を指定したものとみなされます。
scale3d(x方向の倍率, y方向の倍率, z方向の倍率)
要素を拡大または縮小させます。x軸方向、y軸方向、z軸方向に拡大・縮小させる倍率を、それぞれ標準のサイズを1とした単位なしの実数値で指定します。
scaleX(x方向の倍率)
要素をx軸方向へ拡大または縮小させます。拡大・縮小させる倍率を、標準のサイズを1とした単位なしの実数値で指定します。
scaleY(y方向の倍率)
要素をy軸方向へ拡大または縮小させます。拡大・縮小させる倍率を、標準のサイズを1とした単位なしの実数値で指定します。
scaleZ(z方向の倍率)
要素をz軸方向へ拡大または縮小させます。拡大・縮小させる倍率を、標準のサイズを1とした単位なしの実数値で指定します。
rotate(角度)
要素を回転させます。回転させる角度を「deg(度数)」「rad(ラジアン)」「grad(グラード)」などを指定します。プラスの値を指定すると、時計回りに回転します。
rotate3d(角度)
変形の基点と最初の3つの値で指定された方向のベクトル(x, y, z)を結ぶ直線を軸として、要素を時計回りに回転させます。最後の値に回転させる角度を「deg(度数)」「rad(ラジアン)」「grad(グラード)」などを指定します。
rotateX(x軸回りの角度)
要素を回転させます。x軸を回転軸として回転させる角度を、それぞれ「deg(度数)」「rad(ラジアン)」「grad(グラード)」などで指定します。rotate3d(1, 0, 0, x軸周りの角度)を指定した場合と同じです。
rotateY(y軸回りの角度)
要素を回転させます。y軸を回転軸として回転させる角度を、それぞれ「deg(度数)」「rad(ラジアン)」「grad(グラード)」などで指定します。rotate3d(1, 0, 0, y軸周りの角度)を指定した場合と同じです。
skewX(x方向の角度)
要素をx軸方向に傾斜させます。傾斜させる角度を「deg(度数)」「rad(ラジアン)」「grad(グラード)」などで指定します。
skewY(y方向の角度)
要素をy軸方向に傾斜させます。傾斜させる角度を「deg(度数)」「rad(ラジアン)」「grad(グラード)」などで指定します。
matrix(a, b, c, d, e, f)
3×3の変換行列を利用して座標を変換し、要素を変形させます。この行列のa〜fの9つの値をmatrix()関数で指定します。例えば元の要素の座標を(x, y)とすると、変形後の新しい座標は、右の式によって計算されたものになり、(ax+cy+e bx+dy+f)となります。