縮放,指的是“縮小”和“放大”。在CSS3中,我們可以使用scale()方法來將元素根據中心原點進行縮放。
跟translate()方法一樣,縮放scale()方法也有3種情況:
(1)scaleX(x):元素僅水平方向縮放(X軸縮放);
(2)scaleY(y):元素僅垂直方向縮放(Y軸縮放);
(3)scale(x,y):元素水平方向和垂直方向同時縮放(X軸和Y軸同時縮放);
語法:
transform:scaleX(x)
說明:
x表示元素沿著水平方向(X軸)縮放的倍數,如果大於1就代表放大;如果小於1就代表縮小。
大家想想倍數是怎樣一個概念就很好理解了。
語法:
transform:scaleY(y)
說明:
y表示元素沿著垂直方向(Y軸)縮放的倍數,如果大於1就代表放大;如果小於1就代表縮小。
語法:
transform:scale(x,y)
說明:
x表示元素沿著水平方向(X軸)縮放的倍數,y表示元素沿著垂直方向(Y軸)縮放的倍數。
注意,Y是一個可選參數,如果沒有設置Y值,則表示X、Y兩個方向的縮放倍數是一樣的(同時放大相同倍數)。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3縮放scale()方法</title> <style type="text/css"> /*設置原始元素樣式*/ #origin { margin:100px auto;/*水平居中*/ width:200px; height:100px; border:1px dashed gray; } /*設置當前元素樣式*/ #current { width:200px; height:100px; color:white; background-color: #3EDFF4; text-align:center; transform:scaleX(1.5); -webkit-transform:scaleX(1.5); /*兼容-webkit-引擎浏覽器*/ -moz-transform:scaleX(1.5); /*兼容-moz-引擎浏覽器*/ } </style> </head> <body> <div id="origin"> <div id="current"></div> </div> </body> </html>
在浏覽器預覽效果如下:
分析:
從上圖可以看出,元素沿著X軸方向放大了1.5倍(兩個方向同時延伸,整體放大1.5倍)。
transform:scaleY (1.5); -webkit-transform:scaleY(1.5); /*兼容-webkit-引擎浏覽器*/ -moz-transform:scaleY(1.5); /*兼容-moz-引擎浏覽器*/
當使用上面代碼時,在浏覽器預覽效果如下:
大家在“在線測試”中自行修改代碼體驗一下。