變形（transform）

1.變形是指通過css來改變元素的形狀或位置。變形不會影響到頁面的佈局。

2.transform（用來設定元素的變形效果）

　　-平移：

　　　　-translateX() 沿x軸方向平移

　　　　-translateY() 沿y軸方向平移

　　　　-translateZ() 沿z軸方向平移（調整元素在z軸的位置，正常情況就是調整元素和人眼之間的距離，距離越大，元素離人越近。

　　-平移元素百分比是相對於自身計算的，多個用空格隔開。一個元素只能設定一個transform，否則會被覆蓋。

3.元素居中：

.box {      
background-color: green;        
    position: absolute;        
    /*需要設定寬高居中，只適用於元素大小確定的*/       
    width: 200px;        
    height: 200px;        
    top: 0;        
    left: 0;        
    right: 0;        
    bottom: 0;        
    margin: auto;     
    /*不用設定寬高，被內容撐開居中*/      
    left: 50%;        
    top: 50%;        
    transform: translateX(-50%) translateY(-50%);   
}

4.z軸屬於立體效果（近大遠小），預設情況下網頁是不支援透明，如果想要看見效果必須要設定網頁的視距。

html { 
    perspective: 800px; 
}

旋轉

1.通過旋轉可以使元素沿著 x y 或 z 旋轉指定的角度

　　-旋轉：

　　　　-rotateX()

　　　　-rotateY()

　　　　-rotateZ()

　　　　-transform: rotateX(45deg)

　　　　-transform: rotateX(.25turn)

2.backface-visibility: 是否顯示元素的背面

　　-可選值：　　

　　　　-visible 顯示 預設值

　　　　-hidden 隱藏

學識淺薄，如有錯誤，懇請斧正，在下不勝感激。