skew関数
関数skewは要素に傾斜を与え、
長方形を平行四辺形に変形します。
transformプロパティと
組み合わせて使用します。
プロパティの値は角度の単位で指定します。
傾斜は、transform-originプロパティで
指定された点を中心に行われます。
1つまたは2つのパラメータをカンマ区切りで受け取ります。 パラメータが2つの場合、1つ目のパラメータは水平方向の傾斜を、 2つ目のパラメータは垂直方向の傾斜を設定します。 パラメータが1つの場合、それは水平方向の傾斜を設定します（両方向ではありません）。 パラメータは正の値でも負の値でもかまいません。
構文
セレクタ {
transform: skew(1つまたは2つの角度);
}
例
この例では、ブロックが左に30度傾斜しています：
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
例
この例では、ブロックが右に30度傾斜しています：
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
例
この例では、ブロックが垂直方向に（正の値で）30度傾斜しています：
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
例
この例では、ブロックが垂直方向に（負の値で）30度傾斜しています：
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
例
X軸とY軸の両方に同時に傾斜を設定します：
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
