CSS學習筆記–2D轉換模組

一、轉換樣式（transform）:
 1.旋轉，其中deg是單位，代表多少度：
 transform: rotate (45deg)

 2.平移，第一個引數是水平方向，第二個引數是垂直方向：
 transform： translate (50px, 100px)

 3.縮放，第一個引數是水平方向，第二個引數是垂直方向，取值沒單位；如果取值在水平和垂直縮放都一樣，那麼可以簡寫為一個引數：
 transform： scale（x,y）

  3.1如果水平和垂直方向都是1，代表不縮放： transform: scale(1,1)
  3.2如果取值大於1，代表放大；如果取值小於1，代表縮小；
 
 注意點：

 1.如果需要進行多個轉換，那麼用空格隔開：
 例如： transform: rotate(45deg)  translate(x,y) ;
 2.2D轉換模組會修改元素的座標系，所以旋轉之後在平移就不是水平平移了；
 
二、形變中心點：
 1.預設情況下，所有元素都是以自己的中心點作為參考來旋轉的（正數表示順時針方向），我們可以通過形變中心點屬性來修改他的參考點；
 格式：
 transform-origin：0px 0px ;

 (第一個引數：水平方向，第二個引數：垂直方向)

 2.取值有三種形式：a. 具體畫素；b. 百分比；c. 特殊關鍵字（如：center、left、top等）
 
三、旋轉軸向：

 1.想圍繞哪個軸旋轉，那麼只需要在 rotate 後面加上哪個軸即可（例如: 圍繞 Z 軸轉：transform： rotateZ (45deg) ）
 
四、透視屬性（ perspective: 500px; ）：
 1.什麼是透視: 遠小近大；
 2.注意點: 透視屬性必須新增到需要呈現遠小近大效果元素的父元素;

五、盒子與文字的陰影:
 1.給盒子新增陰影
 box-shadow： 水平偏移 垂直偏移 模糊度 陰影擴充套件 陰影顏色 內外陰影；

 2.盒子的陰影分為內外陰影，預設為外陰影；

 3.快速新增陰影只需寫三個引數即可：
 box-shadow: 水平偏移 垂直偏移 模糊度；（如取值：0 0 10px)
 預設情況下，陰影的顏色和盒子內容顏色一致；

 4.文字陰影:
 text-shadow: 水平偏移 垂直偏移 模糊度 陰影顏色；
 
 
 

---

===筆記內容來自於《從零玩轉HTML5前端+跨平臺開發》