<div id="wrap">
  <div class="box  scale1">
    等比例缩放
  </div>
  <div class="box  scale2">
    不等比例缩放
  </div>
  <div class="box  scale3">
    x轴缩放
  </div>
  <div class="box  scale4">
    y轴缩放
  </div>
  <div class="box  scale5">
    以(0,0)坐标为起点缩放
  </div>
</div>
body{
  font:0.875rem "microsoft Yahei";
  color:#fff;
}
#wrap{
  width:100%;
  padding:0.5em;
  box-sizing:border-box;
}
.box{
  width:150px;
  height:150px;
  padding:10px;
  background:#F65676;
  transition:0.2s ease-out;  
  float:left;
  margin:0.8em;
}
.scale1:hover{
  transform:scale(1.2);
}
.scale2:hover{
  transform:scale(1.2,0.8);
}
.scale3:hover{
  transform:scaleX(1.2);
}
.scale4:hover{
  transform:scaleY(1.2);  
}
.scale5:hover{
  transform:scale(1.2);
  transform-origin:0 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.