CSS 2D缩放
2019-11-30 本文已影响0人
Kkite
- 缩放 scale(x,y)
transform(0.8,1);
可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
scale()的取值默认的值为1，当设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。
案例代码一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片的缩放</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: pink;
margin: 100px auto;
transition: all 0.5s;
}
div:hover{
transform: scale(2); /*x 水平缩放 y垂直缩放 如果只写一个参数 宽度和高度都缩放*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
案例效果：
scale.gif
案例代码二：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
section{
width: 428px;
height: 289px;
margin: 100px auto;
overflow: hidden; /*溢出隐藏*/
border: 1px solid red;
}
section img{
transition: all 1s; /*图片做缩放，所以对图片用transition*/
}
section:hover img{ /*鼠标经过section的时候，里面的img缩放*/
transform: scale(1.4);
}
</style>
</head>
<body>
<section>
<img src="./earth.jpg" width="428" height="289">
</section>
</body>
</html>
案例二效果：
earth.gif
如有错误或建议欢迎大家指出与评论哈，希望这篇博文能帮助到大家，也可以分享给需要的人。
如需转载，请注明出处。https://www.jianshu.com/p/d1d20b10b5aa
