transformは平面空間で要素を変形できる【CSS】

transformプロパティは、トランスフォーム関数というものを指定して対象要素を変形させるプロパティです。

平面空間での変形では、右方向を正とするx軸、下方向を正とするy軸を定義した2方向での変形となり、変形は要素の中心を軸に実行されます。

transformの値の指定方法

transformプロパティでは、以下のような値を指定することができ、半角スペースで区切って複数指定することもできます。

none

noneを指定すると、要素は変形しません。

matrix()

matrix()は6つの数値をカンマ（,）で区切って指定し、行列式によって要素を変形します。

指定する6つの値は、x軸方向の拡大・縮小率、y軸方向の傾斜率、x軸方向の傾斜率、y軸方向の拡大・縮小率、x座標の移動距離、y座標の移動距離にあたります。

translate()

translate()を指定すると、要素のxy座標を移動します。

移動距離は単位付きの数値で表し、x座標、y座標をカンマで区切って指定します。

たとえば、translate(20px, 20px)と指定すると、右へ20px、下へ20px移動します。

translateX()

translateX()を指定すると、要素のx座標を移動します。

translateY()

translateY()を指定すると、要素のy座標を移動します。

scale()

scale()を指定すると、要素はx軸、y軸方向に拡大・縮小します。

たとえばscale(2,0.5)と指定すると、x軸方向に2倍拡大、y軸方向に1/2縮小されるという意味です。

scaleX()

scaleX()を指定すると、要素はx軸方向に拡大・縮小します。

scaleY()

scaleY()を指定すると、要素はy軸方向に拡大・縮小します。

rotate()

rotate()を指定すると、要素が回転します。

回転角度もdegなど角度を表す単位つきの数値で指定します。

たとえばrotate(30deg)と指定すると、要素は時計回りに30度回転します。

skew()

skew()を指定すると、要素の形状をx軸、y軸方向に傾斜させます。

skewX()

skewX()を指定すると、要素の形状をx軸方向に傾斜させます。

skewY()

skewY()を指定すると、要素の形状をy軸方向に傾斜させます。