CSS3 transform：scale缩放

跟translate()方法类似，缩放也有3种情况：scaleX()、scaleY()、scale()。参数x表示元素在x轴方向的缩放倍数，参数y表示元素在y轴方向的缩放倍数。

<div class="box"> <img src="img/mountain.jpg" alt=""> </div>

css样式：

* {
  margin: 0;
  padding: 0;
}

.box {
  width: 500px;
  height: 500px;
  overflow: hidden;
  margin: 10px auto 0;
}

.box img {
  width: 100%;
  /* 谁变化 */
  /* 注意是图片缩放，如果是盒子缩放，动画将会十分生硬 */
  transition: 0.6s ease;
}

.box:hover img {
  /* 变形：缩放 */
  /* 内核标识码 */
  /* transform: scale(1.1); */
  transform: scale(1.2);
}

代码演示：