在CSS中，transform的意思為改變、變形，主要用于設(shè)置元素的形狀改變，實(shí)現(xiàn)元素的2D或3D轉(zhuǎn)換；該屬性可以配合屬性值（轉(zhuǎn)換函數(shù)）來對將元素進(jìn)行旋轉(zhuǎn)rotate、扭曲skew、縮放scale、移動translate以及矩陣變形matrix。

前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
API 文檔、設(shè)計、調(diào)試、自動化測試一體化協(xié)作工具：點(diǎn)擊使用

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

Transform字面上就是變形，改變的意思，是css3的新增屬性，用來設(shè)置元素的形狀改變，實(shí)現(xiàn)元素的2D或3D轉(zhuǎn)換。

在CSS3中transform主要包括以下幾種：旋轉(zhuǎn)rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。

語法：

transform: none|transform-functions;即：transform: rotate | scale | skew | translate |matrix;

其中none表示不變換，transform-functions表示一個或多個變換函數(shù)，以空格隔開

一、旋轉(zhuǎn) rotate

1、rotate(angle)：通過指定的角度參數(shù)對原元素指定一個2D旋轉(zhuǎn)。

angle是指旋轉(zhuǎn)角度（單位為deg），如果設(shè)置的值為正數(shù)表示順時針旋轉(zhuǎn)，如果設(shè)置的值為負(fù)數(shù)，則表示逆時針旋轉(zhuǎn)。

transform: rotate(45deg);  //順時針旋轉(zhuǎn)30度

注意：旋轉(zhuǎn)的時候默認(rèn)以元素中心點(diǎn)為基點(diǎn)進(jìn)行旋轉(zhuǎn)，可以通過transform-origin屬性定義旋轉(zhuǎn)的基點(diǎn)位置

transform-origin屬性：定義旋轉(zhuǎn)的基點(diǎn)。

語法：

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

默認(rèn)值：

transform-origin: 50% 50% 0;

2D的情況下，默認(rèn)元素的左上角為0% 0%，例如：繞右下角旋轉(zhuǎn)45度

transform-origin: 100% 100%;transform: rotate(45deg);

2、rotate3d(x, y, z, angle)：定義3D旋轉(zhuǎn)

不常用

3、rotateX(angle)：定義沿著X軸的3D旋轉(zhuǎn)

transform: rotateX(45deg);

4、rotateY(angle)：定義沿著Y軸的3D旋轉(zhuǎn)

transform:rotateY(45deg);

5、rotateZ(angle)：定義沿著Z軸的3D旋轉(zhuǎn)

由以下的例子可以看出，Z軸的方向是垂直于window的方向

transform:rotateZ(45deg);

二、移動 translate

1、translate(x, y) ：定義2D移動轉(zhuǎn)化

x 是第一個過渡值參數(shù)，y 是第二個過渡值參數(shù)選項。如果未被提供，則ty以 0 作為其值。也就是translate(x,y),它表示對象進(jìn)行平移，按照設(shè)定的x,y參數(shù)值,當(dāng)值為負(fù)數(shù)時，反方向移動物體，其基點(diǎn)默認(rèn)為元素中心點(diǎn)，也可以根據(jù)transform-origin進(jìn)行改變基點(diǎn)。

例如：

transform:translate(50px,50px):

2、translate(x)：指定X軸方向上的一個移動

例如：

transform:translateX(50px):

3、translate(y)：指定Y軸方向上的一個移動

例如：

transform:translateY(50px):

4、translate3d(x, y, z)：定義3D移動轉(zhuǎn)換

5、translateZ(z)：指定Z軸方向上的一個移動

三、縮放 scale

1、scale(x, y)：定義2D縮放轉(zhuǎn)換。

X表示水平方向縮放的倍數(shù)，Y表示垂直方向的縮放倍數(shù)，而Y是一個可選參數(shù)，如果沒有設(shè)置Y值，則表示X，Y兩個方向的縮放倍數(shù)是一樣的。并以X為準(zhǔn)。例如：

transform: scale(0.7, 0.3);

可以通過transform-origin對元素的基點(diǎn)進(jìn)行設(shè)置，同樣基點(diǎn)在元素中心位置；例如：

transform-origin: 100% 100%;transform: scale(0.7, 0.3);

2、scaleX(x)：在X軸方向進(jìn)行縮放轉(zhuǎn)換

transform: scaleX(0.7)

3、scaleY(y)：在Y軸方向進(jìn)行縮放轉(zhuǎn)換

transform: scaleY(0.7)

4、scale3d：(x, y, z)：定義3D縮放轉(zhuǎn)換

5、scaleZ(z)：在Z軸方向進(jìn)行縮放轉(zhuǎn)換

四、扭曲 skew

1、skew(x-angle, y-angle) ：定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。

skew是用來對元素進(jìn)行扭曲變行，第一個參數(shù)是水平方向扭曲角度，第二個參數(shù)是垂直方向扭曲角度。其中第二個參數(shù)是可選參數(shù)，如果沒有設(shè)置第二個參數(shù)，那么Y軸為0deg。：

transform: skew(10deg,10deg);

同樣是以元素中心為基點(diǎn)，我們也可以通過transform-origin來改變元素的基點(diǎn)位置。例如

transform-origin: 100% 100%;transform: skew(10deg,10deg);

2、skewX(angle)：定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換

transform: skewX(10deg);

3、skewY(angle)：定義沿著 Y軸的 2D 傾斜轉(zhuǎn)換

transform: skewY(10deg);

注意：如果要實(shí)現(xiàn)3D效果，需要將transform-style屬性設(shè)置為preserve-3d，即

transform-style: preserve-3d;

（學(xué)習(xí)視頻分享：web前端）