站長(zhǎng)資訊網(wǎng)在css中，可以使用transfrom屬性的scale()方法設(shè)置縮放，語(yǔ)法格式為“transfrom:scale(方向)”。scale()方法用于修改元素的大小，通過(guò)向量形式定義的縮放值來(lái)放大或縮小元素，同時(shí)可在不同方向設(shè)置不同縮放值。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在CSS3中，我們可以使用transform屬性的scale()方法來(lái)實(shí)現(xiàn)元素的縮放效果?？s放，指的是“縮小”和“放大”的意思。
語(yǔ)法：
transform: scaleX(x); /*沿X軸方向縮放*/ transform: scaleY(y); /*沿Y軸方向縮放*/ transform: scale(x, y); /*沿X軸和Y軸同時(shí)縮放*/
說(shuō)明：
縮放有3種情況：scaleX()、scaleY()、scale()。參數(shù)x表示元素在x軸方向的縮放倍數(shù)，參數(shù)y表示元素在y軸方向的縮放倍數(shù)。
當(dāng)x或y取值為0~1之間時(shí)，元素進(jìn)行縮??；當(dāng)x或y取值大于1時(shí)，元素進(jìn)行放大。大家思考一下“倍數(shù)”的概念，很快就懂了。
舉例：scaleX(x)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /*設(shè)置原始元素樣式*/ #origin { width:200px; height:100px; border:1px dashed gray; } /*設(shè)置當(dāng)前元素樣式*/ #current { width:200px; height:100px; color:white; background-color: rgb(30, 170, 250); opacity: 0.6; transform:scaleX(1.5); } </style> </head> <body> <div id="origin"> <div id="current"></div> </div> </body> </html>
瀏覽器預(yù)覽效果如下圖所示。
分析：
transform:scaleX(1.5);表示元素在x軸方向放大為原來(lái)的1.5倍。如果把1.5改為0.5，則元素會(huì)在x軸方向縮小為原來(lái)的0.5倍，此時(shí)預(yù)覽效果如下圖所示。
實(shí)際上，transform:scaleX(1.5);其實(shí)可以等價(jià)于transform:scale(1.5, 0);，小伙伴們可以自行測(cè)試一下。
舉例：scaleY(y)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /*設(shè)置原始元素樣式*/ #origin { width:200px; height:100px; border:1px dashed gray; } /*設(shè)置當(dāng)前元素樣式*/ #current { width:200px; height:100px; color:white; background-color: rgb(30, 170, 250); opacity: 0.6; transform:scaleY(1.5); } </style> </head> <body> <div id="origin"> <div id="current"></div> </div> </body> </html>
瀏覽器預(yù)覽效果如下圖所示。
分析：
transform:scaleY(1.5);表示元素在y軸方向放大為原來(lái)的1.5倍。如果把1.5改為0.5，則元素會(huì)在y軸方向縮小為原來(lái)的0.5倍，此時(shí)瀏覽器預(yù)覽效果如下圖所示。
實(shí)際上，transform:scaleY(1.5);其實(shí)可以等價(jià)于transform:scale(0, 1.5);，小伙伴們可以自行測(cè)試一下。
舉例：scale(x, y)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /*設(shè)置原始元素樣式*/ #origin { width:200px; height:100px; border:1px dashed gray; } /*設(shè)置當(dāng)前元素樣式*/ #current { width:200px; height:100px; color:white; background-color: rgb(30, 170, 250); opacity: 0.6; transform:scale(1.2, 1.5); } </style> </head> <body> <div id="origin"> <div id="current"></div> </div> </body> </html>
瀏覽器預(yù)覽效果如下圖所示。
分析：
transform:scale(1.2, 1.5);表示元素在x軸和y軸兩個(gè)方向上同時(shí)放大，x軸方向放大為原來(lái)的1.2倍，y軸方向放大為原來(lái)的1.5倍。實(shí)際上，transform:scale(1.2, 1.5);其實(shí)可以等價(jià)于以下代碼：
transform:scaleX(1.2); transform:scaleY(1.5);
推薦學(xué)習(xí)：css視頻教程
