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);
}
代码演示:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果