で、何ができるんですかねぇ…

トランスフォームでできるのは以下

• 要素の表示位置の移動
• 要素の縮尺の変更
• 要素の回転
• 要素の傾斜の変更

基本、JSでゴリゴリやるのが分かりやすいかもしれないですね。

要素の表示位置の移動

transform:translate()を使用します。

translate(X,Y)

表示位置からいくつ移動させるかを指定します。
X軸,Y軸と指定していきます。
absoluteではないので、実態が残ったまま移動してる感じですかね。
また、個別指定方法としては
transform:translateX(X方向の距離)
transform:translateY(Y方向の距離)
があります。

要素の縮尺の変更

transform:scale()を使用します。

scale(X,Y)

指定した要素を拡大縮小するヤツです。
これもX軸とY軸での指定が可能ですが
今回は距離ではなく、倍率指定となります。
通常の表示が1となり、それを基準に設定が可能です。
また、-1とすることで反転させる事もできます。

個別指定方法としては
transform:scaleX(X軸比率)
transform:scaleY(Y軸比率)
があります。

要素の回転

transform:rotate()を使用します。

rotate(deg)

指定単位は【deg】と呼ばれるものを指定します。
rotateでは時計回りに指定角度分傾いていきます。
負の値を指定すると、反時計回りに傾いていきます。
特に指定がなければ、要素の中心を軸に傾きますが
transform-originを使用することにより、中心軸を変更することができます。

rotateX(deg)

横軸を中心に要素が回転するようになります。

rotateY(deg)

縦軸を中心に要素が回転するようになります。

transform-origin(x y)

回転軸の変更を行います。
要素の左上を基準として、指定を行います。
指定できるのは
１：パーセント
２：数値
３：キーワード(X:left・center・right Y:top・center・bottom)
となります。
デフォルトは、50% 50% となります。

要素の傾斜の変更

transform:skew()を使用します。

skew(X軸deg,Y軸deg)

rotateと同じく指定単位は【deg】と呼ばれるものを指定します。
傾きの角度を指定してあげます。
X軸とY軸には個別に指定することができます。

skewX(deg)

横軸を中心に要素が傾きます。

skewY(deg)

縦軸を中心に要素が傾きます。