首先，要知道transition過渡和animation動畫都是實現元素運動的一種方式。區別在於：過渡需要人為觸發，例如點選觸發或者滑鼠懸停觸發，而animation是可以不需要人為觸發。

過渡：
一、2D轉換
1.1轉換方法
translate(x,y);元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置引數：

rotate():元素順時針旋轉給定的角度
scale()元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）引數：
skew()元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）引數：
matrix()方法把所有 2D 轉換方法組合在一起。

1.2注意：
1.要有過渡的屬性
2.告訴系統屬性需要執行的效果
3.必須要有過渡的時長

transition-duration: 5s;//過渡的時長
transition-property: margin-left;// 需要過渡的屬性

transform ：rotate（xdeg）旋轉
transform： translate（左方向水平距離，下方向垂直距離）負的數值就是反方向。
transform ：scale（1，1.5）縮放，x軸方向和y軸方向，取值是1代表不變

當需要多個效果的時候：空格隔開。
注意：2d旋轉會修改初始的x軸方向，所以旋轉之後再平移不再是水平方向。

以上，旋轉都是以元素自身的中心為參考點修改的。
二、3D轉換

以下，形變中心點屬性可以修改元素旋轉的中心點。
transfo-origin：0,0；
取值有三種：1.具體畫素 2.百分比 3.特殊關鍵字

特殊關鍵字：
center top left
transfo-origin：left，top；左上角
transfo-origin：center center；中心

旋轉軸向
transform rotateZ 圍繞著Z軸旋轉

-------拓展：
透視
perspective

----盒子陰影
box-shadow：水平偏移 垂直偏移 模糊度 陰影擴充套件 陰影顏色 內外陰影
注意：盒子陰影分為內外陰影，預設外陰影

-----文字陰影
font-shadow

animation動畫