transformは3D空間で要素を変形することもできる【CSS】

transformプロパティは、平面空間だけでなく3D空間で要素を変形することもできます。

3D空間での変形は、平面空間でのx軸とy軸に加えて、奥から手前に向かう方向を正とするz軸を定義した3方向での変形となります。

transformの値の指定方法

transformプロパティによる3D空間での要素変形は、下記のような値で指定します。

matrix3d()

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

translate3d()

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

移動距離はpxなどの単位つき数値で表し、x座標、y座標、z座標をカンマ（,）で区切って指定します。

translateZ()

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

scale3d()

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

scaleZ()

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

要素をz軸方向に変形させているときに意味があり、要素とxy平面からの距離の比率が変化します。

rotate3d()

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

rotateX()

rotateX()を指定すると、要素がx軸を中心に回転します。

回転角度をdegなどの角度を表す単位つきの数値で指定し、正の数値を指定すれば、要素の上辺が画面奥に向かって回転します。

rotateY()

rotateY()を指定すると、要素がy軸を中心に回転します。

正の数値を指定する場合、要素の左辺が画面奥に向かって回転します。

rotateZ()

rotateZ()を指定すると、要素がz軸を中心に回転します。

正の数値を指定する場合、要素は時計周りに回転します。

perspective()

perspective()を指定すると、画面からの視点の距離を示して、z軸方向に変形した要素の奥行きを表します。