站長資訊網(wǎng)在css中，可以使用transfrom屬性的scale()方法設(shè)置縮放，語法格式為“transfrom:scale(方向)”。scale()方法用于修改元素的大小，通過向量形式定義的縮放值來放大或縮小元素，同時可在不同方向設(shè)置不同縮放值。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在CSS3中，我們可以使用transform屬性的scale()方法來實現(xiàn)元素的縮放效果?？s放，指的是“縮小”和“放大”的意思。
語法：
transform: scaleX(x); /*沿X軸方向縮放*/ transform: scaleY(y); /*沿Y軸方向縮放*/ transform: scale(x, y); /*沿X軸和Y軸同時縮放*/
說明：
縮放有3種情況：scaleX()、scaleY()、scale()。參數(shù)x表示元素在x軸方向的縮放倍數(shù)，參數(shù)y表示元素在y軸方向的縮放倍數(shù)。
當x或y取值為0~1之間時，元素進行縮小；當x或y取值大于1時，元素進行放大。大家思考一下“倍數(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è)置當前元素樣式*/ #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>
瀏覽器預覽效果如下圖所示。
分析：
transform:scaleX(1.5);表示元素在x軸方向放大為原來的1.5倍。如果把1.5改為0.5，則元素會在x軸方向縮小為原來的0.5倍，此時預覽效果如下圖所示。
實際上，transform:scaleX(1.5);其實可以等價于transform:scale(1.5, 0);，小伙伴們可以自行測試一下。
舉例：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è)置當前元素樣式*/ #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>
瀏覽器預覽效果如下圖所示。
分析：
transform:scaleY(1.5);表示元素在y軸方向放大為原來的1.5倍。如果把1.5改為0.5，則元素會在y軸方向縮小為原來的0.5倍，此時瀏覽器預覽效果如下圖所示。
實際上，transform:scaleY(1.5);其實可以等價于transform:scale(0, 1.5);，小伙伴們可以自行測試一下。
舉例：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è)置當前元素樣式*/ #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>
瀏覽器預覽效果如下圖所示。
分析：
transform:scale(1.2, 1.5);表示元素在x軸和y軸兩個方向上同時放大，x軸方向放大為原來的1.2倍，y軸方向放大為原來的1.5倍。實際上，transform:scale(1.2, 1.5);其實可以等價于以下代碼：
transform:scaleX(1.2); transform:scaleY(1.5);
推薦學習：css視頻教程
