要素に2次元の変形効果を付けてみる

transformプロパティを利用すると、要素のボックスに２次元、３次元の変形効果を適用できます。２次元変形では横(Ｘ軸)、縦(Ｙ軸)の方向に関して、移動、拡大・縮小、回転,傾斜の変形効果を適用できます。変形の種類は下記の関数を利用します。

変形関数の指定方法

none:
　変形効果の適用なし
translate(Ｘ軸方向の距離,Ｙ軸方向の距離):
　要素を移動させる。Ｘ軸方向とＹ軸方向の移動距離を、それぞれ「実数値＋単位」か「パーセント値＋％」で指定する。値を１つだけ指定したときは、Ｙ軸方向の移動距離に「０」を指定したものとみなされます。
translateX(Ｘ軸方向の距離):
　要素をＸ軸方向へ移動させる。移動距離は「実数値＋単位」か「パーセント値＋％」で指定する。
translateY(Ｙ軸方向の距離):
　要素をＹ軸方向へ移動させる。移動距離は「実数値＋単位」か「パーセント値＋％」で指定する。
　
scale(Ｘ軸方向の倍率,Ｙ軸方向の倍率):
　要素を拡大・縮小させます。Ｘ軸方向とＹ軸方向に拡大・縮小させる倍率を、それぞれ標準サイズを１とした単位なしの実数値で指定します。値を１つだけ指定した場合は、Ｘ軸方向とＹ軸方向へ同じ倍率を指定したとみなされます。
scaleX(Ｘ軸方向の倍率):
　要素をＸ軸方向へ拡大・縮小させます。拡大・縮小させる倍率を、標準サイズを１とした単位なしの実数値で指定する。
scaleY(Ｙ軸方向の倍率):
　要素をＹ軸方向へ拡大・縮小させます。拡大・縮小させる倍率を、標準サイズを１とした単位なしの実数値で指定する。
　
rotate(角度):
　要素を回転させる。回転させる角度を「deg(度数)」「rad(ラジアン)」「grad(グラード)」で指定する。正の値を指定すると、時計回りに回転する。

skewX(Ｘ軸方向の角度):
　要素をＸ軸方向に傾斜させる。傾斜させる角度を「deg(度数)」「rad(ラジアン)」「grad(グラード)」で指定する
skewY(Ｙ軸方向の角度):
　要素をＹ軸方向に傾斜させる。傾斜させる角度を「deg(度数)」「rad(ラジアン)」「grad(グラード)」で指定する

matrix(a,b,c,d,e,f):
　３＊３の変換行列を利用して座標を変換して、要素を変形させます。

各変形効果を半角スペースで区切って書けば、複数の効果を適用できます。そのときは、先に指定したものから適用されます。指定する順番により効果が変わることがあります。

それと、変形の基点はボックスの中心(50%､50%)ですが、後述するtransform-originプロパティで変更することができます。

２次元変形の基点を変更する

２次元の変形効果は、ボックスの中心(50%,50%)を基点して適用されますが、transform-originプロパティを利用すると、この位置を変更できます。

ボックスの左上を(0,0)としたときの基点の位置を、Ｘ軸方向とＹ軸方向の座標又はキーワードで半角スペースで区切って指定します。値を１つだけ指定したときは、２つ目の値に「center」を指定したとみなされます。

値の指定方法
・パーセント値＋％
　要素ボックスのサイズに対する割合で、基点の位置を調整
・実数値＋単位
　数値に単位をつけて、貴店の位置を指定する
・キーワード　top,bottom,left,right,center
　Ｘ軸方向の位置(left,center,right)とＹ軸方向の位置(top,center,bottom)を指定する。top,left「0%」,rightとbottomは「100%」centerは「50%」を指定したときと同じです。

サンプルコードの実行結果はこちら