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

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

1. 平移

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

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

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

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

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

注意：

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

2. 縮放

在CSS3中，使用scale()可以實現元素縮放效果，基本語法格式如下：

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

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

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

3. 傾斜

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

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

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

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

4. 旋轉

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

div{ transform:rotate(30deg);}

注意：

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

5. 更改變換的中心點

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

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

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

表1 transform-origin參數說明