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> ```