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

在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表示平移后的元素。

圖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í)線表示放大前的元素，虛線表示放大后的元素。

圖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í)線表示傾斜前的元素，虛線表示傾斜后的元素。

圖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ō)明