transformで変形とかさせてみる

transformは要素を変形させることができる。3Dもあるようだが今回は2Dのみ。設定できるのは座標変換可能な要素のみ。インラインボックス、表の列ボックス、表の列グループボックスは対象外となる。

またブラウザによっては対応しないので以下サイトで確認すべし。対応しない場合はベンダープレフィクスの指定を行う。以下の元画像でtransformによる変化を比較する。設定により画像が枠を超えてしまうので表示は枠内のみにしている。

とりあえずtransformを利用すればホバー時にこんな感じの動作の設定ができる（ちゃんと動作検証していないが）。いろいろ組み合わせてみると面白いかもしれない。デザインネタが尽きたら取り入れてみてもいいかも。

transform: matrix/2D変形

座標軸を考えながら設定。少しややこしいが設定しながら調整。

transform: matrix(a, b, c, d, e, f);

a：水平方向の縮尺率(scaleX)
b：垂直方向の傾斜率(skewY)
c：水平方向の傾斜率(skewX)
d：垂直方向の縮尺率(scaleY)
e：水平方向の移動距離(translateX)
f：垂直方向の移動距離(translateY)

transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);

transform: translate/移動

移動を設定。

transform: translate(a,b);
transform: translateX(a);
transform: translateY(b);

a：X軸の移動距離（pxまたは％で指定）
b：Y軸の移動距離（pxまたは％で指定）

transform: translate(200px, 80%);

拡大と縮小を設定。

transform: scale(a,b);
transform: scaleX(a);
transform: scaleY(b);

a：X軸方向への倍率（倍率または％で指定）
b：Y軸方向への倍率（倍率または％で指定）

transform: scale(1.5, 3.0);

回転を設定。

transform: rotate(a);

a：回転角度（単位deg）

transform: rotate(160deg);

傾きを設定。

transform: skew(a,b);
transform: skewX(a);
transform: skewX(b);

a：X軸回転角度（単位deg）
b：Y軸回転角度（単位deg）

transform: skew(30deg, 20deg);

ちゃんと検証していないがそれぞれのtransformを分けて設定すると動作しないこともある。まとめて指定する場合は以下の通りで。

transform: translateX(300px) rotate(10deg) translateY(5px);