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

全國(guó)咨詢/投訴熱線:400-618-4000

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

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

好口碑IT培訓(xùn)

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

1. 平移

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

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

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

在使用translate()方法移動(dòng)元素時(shí),坐標(biāo)點(diǎn)默認(rèn)為元素中心點(diǎn),然后根據(jù)指定的X坐標(biāo)和Y坐標(biāo)進(jìn)行移動(dòng),效果如圖1所示。在該圖中,1表示平移前的元素,2表示平移后的元素。

2D 變形.gif

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

注意:

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

2. 縮放

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

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

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

2D 變形

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

3. 傾斜

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

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

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

2D 變形

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

4. 旋轉(zhuǎn)

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

div{ transform:rotate(30deg);}

注意:

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

5. 更改變換的中心點(diǎn)

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

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

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

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

參數(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軸的何處。需要注意的是,該值不能是一個(gè)百分比值,否則將會(huì)視為無(wú)效值,一般為像素單位。





猜你喜歡:

CSS3的三種屬性選擇器介紹

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

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

傳智教育web前端課程

0 分享到:
和我們?cè)诰€交談!