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

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

1. 平移

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

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

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

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

圖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ù)、負(fù)數(shù)和小數(shù)，不需要加單位。其中正數(shù)用于放大元素，負(fù)數(shù)用于翻轉(zhuǎn)縮放元素，小于1的小數(shù)用于縮小元素。如果第二個參數(shù)省略，則第二個參數(shù)默認(rèn)等于第一個參數(shù)值。scale()方法縮放示意圖如圖2所示。其中，實線表示放大前的元素，虛線表示放大后的元素。

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

3. 傾斜

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

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

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

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

4. 旋轉(zhuǎn)

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

div{ transform:rotate(30deg);}

注意：

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

5. 更改變換的中心點

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

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

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

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

CSS3的三種屬性選擇器介紹

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

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

傳智教育web前端課程