CodePen Embed - css-transform-skew

<div class="box box1">
  <div class="transform tran1"></div>
</div>

<div class="box box2">
  <div class="transform tran2"></div>
</div>

<div class="box box3">
  <div class="transform tran3"></div>
</div>

.box{position:relative; width:100px; height:100px; display:inline-block; background: #ccc; border:1px solid #ccc; margin-right:100px;}
.transform{position:absolute;top:0; left:0; width:100%; height:100px; background: #444;}
.box1:hover .tran1{
  transform: skewX(30deg);
}
.box2:hover .tran2{
  transform: skewY(30deg);
}
.box3:hover .tran3{
  transform: skew(30deg,30deg);
}

This Pen is owned by gahyun on CodePen.

See more by @gahyun on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.