skew(傾斜)

実行結果

skewX(45deg)

div1

プログラム

  HTML
  <input type="checkbox" id="in1">skewX(45deg)
  <div class="div0 div1">div1</div>
  
/*CSS*/
.div0{
    width:  100px; height: 30px;/*箱の大きさです*/
    background-color: #842;
    position: relative;top: 5vw;left: 5vw;/**/
    transition: all 2s;}/*経過時間*/
  #in1:checked ~ .div1{/*スイッチ0が入ったとき*/
    transform: skew(45deg);}/*傾斜*/

x軸方向に引っ張ります。

skew(傾斜)Y

実行結果

skewY(45deg)

div2

プログラム

HTML
<input type="checkbox" id="in2">skewY(45deg)
<div class="div0 div2">div2</div>
  
/*CSS*/
.div0{
width:  100px; height: 30px;
/*箱の大きさです*/
background-color: #842;
position: relative;top: 0vw;left: 30vw;
/**/
transition: all 2s;}/*経過時間*/
#in2:checked ~ .div2{
    /*スイッチ2が入ったとき*/
transform: skewY(45deg);}/*傾斜*/

y軸方向に引っ張ります。
中心をもって右端を下に引っ張ります。

skew(傾斜)

実行結果

skew

skew(45deg,-45deg)

div3

プログラム

HTML
<input type="checkbox" id="in3">skew(45deg,-45deg)
<div class="div0 div3">div3</div>
  
/*CSS*/
.div0{
width:  100px; height: 30px;
background-color: #842;
position: relative;top: 0vw;left: 30vw;
/**/
transition: all 2s;}/*経過時間*/
#in3:checked ~ .div3{
    /*スイッチ3が入ったとき*/
transform: skew(45deg,-45deg);}/*傾斜*/

考察

x方向,y方向両方に傾斜させるとrotateに似た動きをします。45°に傾斜させると1.4倍になるので大きくなります。