<div class="box s1">x轴倾斜30度</div>
<div class="box s2"><span>y轴倾斜10度</span></div>
<div class="box s3">x倾斜30度,y轴倾斜10度</div>

.box{
  box-sizing:border-box;
  width:200px;
  height:200px;
  float:left;
  margin:0.5em;
  padding:0.5em;
  font:1em "microsoft Yahei";
  color:#fff;
  transition:0.2s;
}
.s1{
   background-color:#15B0A5;
}
.s1:hover{
  transform:skewX(30deg);
  /*transform-origin:left bottom;  可以改变中心点*/
  
}
.s2{
  background-color:#2A5ECC;
}
.s2:hover{
  transform:skewY(10deg);
}
.s3{
  background-color:#D46794;
}
.s3:hover{
  transform:skew(30deg,10deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.