要素を傾斜変形させる

transformプロパティのskewX()、skewY()、skew()は、要素を傾斜変形するときに使用。

CSSだけでボックス要素を斜めにする
これによって平行四辺形の表現や、斜め罫線をCSSだけで表現することができる


skewX(X軸の傾斜角度)
skewX()関数では、角度によってX軸に沿った傾斜変形を指定します。
skewY(Y軸の傾斜角度)
skewY()関数では、角度によってY軸に沿った傾斜変形を指定します。
skew(X軸の傾斜角度, Y軸の傾斜角度)
skew()関数では、2つの角度によってX軸とY軸に沿った傾斜変形を指定します。 最初の角度はX軸の傾斜、2番目の角度はY軸の傾斜です。 2番目の角度は省略することができますが、この場合には0となりY軸は傾斜しません。

-moz-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
-o-transform: skewX(20deg);
-ms-transform: skewX(20deg);