跟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);
}

代码演示:

202101271611745585990838