一.

transform是改變的意思，在css中主要包括旋轉，移動，縮放，扭曲，矩陣變形。

二.

旋轉rotate

rotate(<angle>) ：通過指定的角度引數對原元素指定一個2D 旋轉，需先有transform-origin屬性的定義。transform-origin定義的是旋轉的基點，其中angle是指旋轉角度，如果設定的值為正數表示順時針旋轉，如果設定的值為負數，則表示逆時針旋轉。如：transform:rotate(30deg):

三.

移動translate

移動translate我們分為三種情況：translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）；translateX(x)僅水平方向移動（X軸移動）；translateY(Y)僅垂直方向移動（Y軸移動）

（1）translate(x,y)

transform:translate(100px,20px):向左移動100px,向下移動20px.

（2）translateX（）

只向x軸進行移動元素，基點是元素中心點，如：transform:translateX(100px):向左平移100px。

（3）translateY()

只向Y軸進行移動，transform:translateY(20px):向右平移20px

四.縮放scale

縮放scale和移動translate是極其相似，scale(x,y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）；scaleX(x)元素僅水平方向縮放（X軸縮放）；scaleY(y)元素僅垂直方向縮放（Y軸縮放），但它們具有相同的縮放中心點和基數，其中心點就是元素的中心位置，縮放基數為1，如果其值大於1元素就放大，反之其值小於1，元素縮小。

(1)scale(x,y)使元素水平方向和垂直方向同時縮放

其中X表示水平方向縮放的倍數，Y表示垂直方向的縮放倍數

（2）scaleX() 水平縮放

scaleX表示元素只在X軸(水平方向)縮放元素，他的預設值是(1,1)

（3）scaleY() 垂直縮放

scaleY表示元素只在Y軸（垂直方向）縮放元素，其基點同樣是在元素中心位置，可以通過transform-origin來改變元素的基點。