- 縮放 scale(x,y)
transform(0.8,1);
可以對元素進(jìn)行水平和垂直方向的縮放弧烤。該語句使用scale方法使該元素在水平方向上縮小了20%昏翰，垂直方向上不縮放。
scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）
scaleX(x)元素僅水平方向縮放（X軸縮放）
scaleY(y)元素僅垂直方向縮放（Y軸縮放）
scale()的取值默認(rèn)的值為1座慰，當(dāng)設(shè)置為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垂直縮放 如果只寫一個參數(shù) 寬度和高度都縮放*/
}
</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{ /*鼠標(biāo)經(jīng)過section的時候嚎莉，里面的img縮放*/
transform: scale(1.4);
}
</style>
</head>
<body>
<section>
<img src="./earth.jpg" width="428" height="289">
</section>
</body>
</html>
案例二效果：
earth.gif
如有錯誤或建議歡迎大家指出與評論哈，希望這篇博文能幫助到大家沛豌，也可以分享給需要的人趋箩。
如需轉(zhuǎn)載赃额，請注明出處。http://www.reibang.com/p/d1d20b10b5aa
