CSS3動畫屬性之Transform

1、transform 屬性（形狀變換）

transform 屬性：對元素應用 2D 或 3D 轉換。該屬性容許咱們對元素進行移動、縮放、旋轉或傾斜。

1.1 translate 移動

translate 方法用於從當前位置移動一個元素。

語法

translateX() 向 x 軸移動元素 translateY() 向 y 軸移動元素 translateZ() 向 z 軸移動元素 translate3d(x, y, z) 簡寫：translate(x, y) --> translate(x, y)

小試牛刀

/* 多個屬性值之間用「空格」分隔！ 負號表示相反方向*/
transform: translateX(100px) translateY(50px);
/* transform: translate(100px, 50px) */
複製代碼

1.2 rotate 旋轉

rotate 方法經過指定角度參數對元素進行旋轉。

語法

rotateX() rotateY() rotateZ() rotate3d(x,y,z) 簡寫：rotate() --> rotateZ()

小試牛刀

/* 向順時針旋轉方向旋轉90度，負號表示逆時針方向 */
transform: rotate(90deg)
/* transform: rotateZ(90deg) */
複製代碼

1.3 scale 縮放

scale 方法和 translate 方法類似，都有3個方向的變換。它的縮放基數爲1，它的參數大於1就放大，小於1就縮小。

語法

scaleX() scaleY() scaleZ() scale3d(x, y, z) 簡寫：scale(x, y) | scale(n) --> scale(n, n)

小試牛刀

/* transform: scaleX(3) scaleY(2); */
transform: scale(3, 2);
複製代碼

1.4 skew 傾斜

skew 方法可讓元素沿着 x 軸或者 y 軸傾斜變形。

語法

skewX(ndeg) skewY(ndeg) 簡寫：skew(x, y)

小試牛刀

/* transform: skewX(30deg) skewY(10deg); */
transform: skew(30deg, 10deg);
複製代碼

---

2、transform-origin 元素基點

元素的默認基點就是自身的中心位置，因此在移動、旋轉和傾斜時均是以元素自身的中心位置爲原點進行的。 那麼當咱們想要讓元素按照必定的參照點進行形狀變換的時候，就要用到 transform-origin 屬性了。

語法

語法： transform-origin: x y z; x: x軸水平方向的取值，能夠是 left | center | right | length | % y: y軸垂直方向的取值，能夠是 top | center | bottom | length | % z: z軸方向的取值，是length 一、top left | left top 等價於 0 0 | 0% 0%

二、top | top center | center top 等價於 50% 0

三、right top | top right 等價於 100% 0

四、left | left center | center left 等價於 0 50% | 0% 50%

五、center | center center 等價於 50% 50% 0（默認值）

六、right | right center | center right 等價於 100% 50%

七、bottom left | left bottom 等價於 0 100% | 0% 100%

八、bottom | bottom center | center bottom 等價於 50% 100%

九、bottom right | right bottom 等價於 100% 100%

小試牛刀

(1) transform-origin: top left;

(2) transform-origin: right;

(3) transform-origin: 50% 50%;