教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

2D變形效果有幾種?變形效果講解

更新時間:2021年07月29日15時29分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

在CSS3中,2D變形主要包括4種變形效果,分別是:平移、縮放、傾斜和旋轉(zhuǎn)。下面分別針對這些變形效果進行講解。

1. 平移

平移是指元素位置的變化,包括水平移動和垂直移動。在CSS3中,使用translate()可以實現(xiàn)元素的平移效果,基本語法格式如下:

transform:translate(x-value,y-value);

在上述語法中,參數(shù)x-value和y-value分別用于定義水平(X軸)和垂直(Y軸)坐標。參數(shù)值常用單位為像素和百分比。當(dāng)參數(shù)值為負數(shù)時,表示反方向移動元素(向左和向上移動)。如果省略了第二個參數(shù),則取默認值0,即在該坐標軸不移動。

在使用translate()方法移動元素時,坐標點默認為元素中心點,然后根據(jù)指定的X坐標和Y坐標進行移動,效果如圖1所示。在該圖中,1表示平移前的元素,2表示平移后的元素。

2D 變形.gif

圖1 Translate()方法平移示意圖

注意:

translate()中參數(shù)值的單位不可以省略,否則平移命令將不起作用。

2. 縮放

在CSS3中,使用scale()可以實現(xiàn)元素縮放效果,基本語法格式如下:

transform:scale(x-value,y-value);

在上述語法中,參數(shù)x-value和y-value分別用于定義水平(X軸)和垂直(Y軸)的縮放倍數(shù)。參數(shù)值可以為正數(shù)、負數(shù)和小數(shù),不需要加單位。其中正數(shù)用于放大元素,負數(shù)用于翻轉(zhuǎn)縮放元素,小于1的小數(shù)用于縮小元素。如果第二個參數(shù)省略,則第二個參數(shù)默認等于第一個參數(shù)值。scale()方法縮放示意圖如圖2所示。其中,實線表示放大前的元素,虛線表示放大后的元素。

2D 變形

圖2 scale()方法縮放示意圖

3. 傾斜

在CSS3中,使用skew()可以實現(xiàn)元素傾斜效果,基本語法格式如下:

transform:skew(x-value,y-value);

在上述語法中,參數(shù)x-value和y-value分別用于定義水平(X軸)和垂直(Y軸)的傾斜角度。參數(shù)值為角度數(shù)值,單位為deg,取值可以為正值或者負值表示不同的的切斜方向。如果省略了第二個參數(shù),則取默認值0。skew()傾斜示意圖如圖3所示。其中實線表示傾斜前的元素,虛線表示傾斜后的元素。

2D 變形

圖3 skew()方法傾斜示意圖

4. 旋轉(zhuǎn)

在CSS3中,使用rotate()可以旋轉(zhuǎn)指定的元素對象,基本語法格式如下:

div{ transform:rotate(30deg);}

注意:

如果一個元素需要設(shè)置多種變形效果,可以使用空格把多個變形屬性值隔開。

5. 更改變換的中心點

通過transform屬性可以實現(xiàn)元素的平移、縮放、傾斜以及旋轉(zhuǎn)效果,這些變形操作都是以元素的中心點為參照。默認情況下,元素的中心點在X軸和Y軸的50%位置。如果需要改變這個中心點,可以使用transform-origin屬性,其基本語法格式如下:

transform-origin: x-axis y-axis z-axis;

在上述語法中,transform-origin屬性包含三個參數(shù),其默認值分別為50% 50% 0px。各參數(shù)的具體含義如表1所示。

表1 transform-origin參數(shù)說明

參數(shù) 描述
x-axis 定義視圖被置于X軸的何處。屬性值可以是百分比、em、px等具體的值,也可以是top、right、bottom、left和center這樣的關(guān)鍵詞。
y-axis 定義視圖被置于Y軸的何處。屬性值可以是百分比、em、px等具體的值,也可以是top、right、bottom、left和center這樣的關(guān)鍵詞。
z-axis 定義視圖被置于Z軸的何處。需要注意的是,該值不能是一個百分比值,否則將會視為無效值,一般為像素單位。





猜你喜歡:

CSS3的三種屬性選擇器介紹

HTML5文檔頭部相關(guān)標簽怎樣使用?

CSS滑動門是什么?有什么用處?[web前端培訓(xùn)]

傳智教育web前端課程

0 分享到:
和我們在線交談!