Deformation in CSS3 - zoom scale ()

Zoom scale () function so that elements of the object is scaled according to the Centers origin.

Zoom scale has three conditions:

1, scale (X, Y) so that the horizontal and vertical directions elements simultaneously scaling (i.e. X-axis and Y-axis simultaneous zoom)

E.g:

div:hover {
  -webkit-transform: scale(1.5,0.5);
  -moz-transform:scale(1.5,0.5)
  transform: scale(1.5,0.5);
}

NOTE: Y is an optional parameter, if the Y value is not set, the zoom magnification indicates two directions X, Y, are the same.

2, scaleX (x) element is only scaled horizontally (X-axis scale)

3, scaleY (y) is scaled vertically only element (Y-axis scale)

HTML code:

<div class="wrapper">
  <div>我将放大1.5倍</div>
</div>

CSS code:

.wrapper {
  width: 200px;
  height: 200px;
  border:2px dashed red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  line-height: 200px;
  background: orange;
  text-align: center;
  color: #fff;
}
.wrapper div:hover {
  opacity: .5;
  -webkit-transform: scale(1.5);
  -moz-transform:scale(1.5)
  transform: scale(1.5);
}

Note: scale () The default value of the value 1, when the value is set to any value between 0.01 and 0.99, so that the role of a narrow element; and any value greater than or equal to 1.01, the effect is to enlarge the elements.