3D Transform

昨天介紹了2D，今天來介紹3D吧～
其實，3D就是比2D多了一個Z軸指標，所以也就多了perspective(透視)這個屬性。
沒看過昨天的2Dtransform介紹，請看這裡。

• 瀏覽器支援情形
  
  圖片來源https://www.w3schools.com/css/css3_3dtransforms.asp

3DTransform屬性：定義、位置、距離

• transform-origin:元素原始位置，表示為elememt(x,y,z)
• transform-style:定義是3D或是2Dtransform，屬性值分為flat(預設2D)和preserve-3d
• perspective:透視距離，即觀看位置到元素的距離，預設是0
• perspective-origin:透視原點，perspective-origin:(x,y)，x可為長度值、百分比及方向關鍵字：left、center、right，y可為長度值、百分比及方向關鍵字：top、center、bottom，預設值(x,y)都為50%
• backface-visibility:定義元素背面是否可見，屬性值為hidden和visible

backface-visibility: hidden;   /* 隱藏 */
/* 或者是 */
backface-visibility: visible;  /* 顯示 */

3DTransform屬性：轉換函數

以下為transform-function介紹：

• 2D\3Dtransform函數屬性比較
  • 3Dtransform的translate、scale多了Ｚ軸屬性
  • 3Dtransform，rotate分為可三軸分別旋轉
  • 3Dtransform，少了skew傾斜屬性
• 長度[參數:m，單位:尺寸值 或％，如使用%，是以元素本身大小作為計算基準]
• 角度[參數:θ，單位:deg]
• 倍率[參數:s，單位:無]
• 數值[參數:n，單位:無]

3DTransform Demo

3D ratate<codepen連結>

參考來源：
[1] https://www.w3schools.com/css/css3_3dtransforms.asp
[2] https://eyesofkids.gitbooks.io/css3/content/contents/transform2d.html