scale · 前端

## 缩放可以对元素进行水平和垂直方向的缩放.该语句使用scale方法使钙元素在水平方向上缩小了20%,垂直方向上不缩放. scale(x,y) : 使元素水平方向和垂直方向同事缩放(也就是X轴和Y轴同时缩放) scaleX(x) : 元素仅水平方向缩放(x轴缩放) scaleY(y) : 元素仅垂直方向缩放(y轴缩放) scale()的取值默认的值为1,当设置为0.01到0.99之间的任何值,作用使一个元素缩小.而任何大于或等于1.01的值,作用是让元素放大.如果只写一个参数,宽度和高度都缩放. ``` <style> div{ width: 200px; height: 200px; background-color: pink; transition: all 0.5s; } div:hover{ transform: scale(1.2,1.5); /*可以写成scale(1.2); scaleX(1.2); scaleY(1.2) */ } </style> </head> <body> <div></div> </body> ``` ## 案例鼠标悬浮,图片放大. ``` <style> div{ width: 500px; height: 418px; margin: 0 auto; overflow: hidden; } img{ transition: all 1s; } div:hover img{ transform: scale(1.2); } </style> </head> <body> <div><img src="p105542812.jpg" alt="" width="500" height="418"></div> </body> ```