css3
2D轉換
transform是css3中具有顛覆性的特徵之一，可以實現元素的位移 旋轉 縮放
移動 translate
旋轉 rotate
縮放 scale


移動 translate
語法：transform:translate(x,y)
或者：transform:translateX(n);
transform:translateY(n);

translate最大的優點 不會影響其他盒子
translate 中的百分比單位是相對於自身元素translate（50%，50%）
對行內標籤沒有效果


旋轉 rotate
語法：transfomr:ratate(度數)
rotate裡面跟度數。單位是deg，比如 rotate(45deg)
角度是正時，順時針；負時，逆時針
預設旋轉的中心點時元素的中心點
旋轉中心點 transform-origin:x y
注意後面的引數用空格隔開 xy預設的旋轉中心點時元素的中心點50% 50%
還可以給xy設定畫素或者方位名詞

縮放 scale
語法 transform:scale(x,y);

/* 1.裡面寫的數字不跟單位 就是倍數的意思 */
/* transform: scale(2, 2); */
/* 2.寬度原來的2唄 高度不變 */
/* transform: scale(2, 1); */
/* 3.等比例縮放 同時修改了寬度和高度， 以下是寬度修改了2倍 高度預設和第一個引數一樣 */
/* transform: scale(2); */
/* 4.可以進行縮小 小於1 就是縮放 */
/* transform: scale(0.5, .5) */
/* 5.scale的優點 ：不會影響其他盒子 可以設定縮放的中心點*/


2d轉換的綜合寫法
1.同時使用多個旋轉 其格式為：transform:translate() rotate() scale();
2.其順序會影響旋轉的效果，先旋轉會改變座標軸的方向
3.當我們同時有位移和其他屬性的時候，記得要將位移放在最前面