3D transform

3D與2D的差別就是多了一個Ｚ軸
和2D transform一樣可以設定rotate(旋轉)、translate(移動)、scale(放大縮小)

rotate(旋轉)

rotate3d(x,y,z,angle)
rotateX()
rotateY()
rotateZ()

translate(移動)

translate3d(x,y,z)
translateX(x)
translateY(y)
translateZ(z)

scale(放大縮小)

scale3d(x,y,z)
scaleX(x)
scaleY(y)
scaleZ(z)

3D Transform 的屬性 :

• transform-origin :
  元素的原始位置(參考點)，參數值為 x , y , z，預設值為50%,50%,0
  rotate(旋轉)、translate(移動)、scale(放大縮小)都是依照元素的中心位置為起點
  如果改變了元素的中心位置，那即使相同的transform條件，結果也會有所不同
  舉例以下兩個圖型原始位置為50%,50%（也就是圖型的中心點）
  
  設定滑鼠移動到圖型上方時會旋轉，此時旋轉的方式都是以中心點為主

  .shape:hover {
        transform: rotate(720deg);
      }
  

  
  將第二個圖的transform-origin變更X軸為left Ｙ軸為bottom
  此時兩個圖片的中心位置已經不一樣了，所以旋轉的結果也會不同

  .s2 {
       background-color: violet;
       transform-origin: left bottom;
     }
  

• transform-style :
  定義 2D 或是 3D Transform 屬性，參數值為 flat(預設值 2D) | preserve-3d
• perspective :
  在3D設計中perspective是一個重要的屬性，主要設定透視圖視點距離
  意思為使用者觀看的位置至元素的距離，預設值為0
  設定方式可以是直接定義perspective屬性:
  perspective: 500px;
  也可以定義在transform中，用類似函式的方式來定義數值:
  transform: perspective(250px);
  設定300px或更少時，會有強烈的失真，500px到1000px的失真較中等，2000px以上的失真就很輕微。

.box1 {
       background-color: aqua;
       transform: perspective(2000px) rotateX(45deg)
     }
     
   .box2 {
       background-color: cornflowerblue;
       transform: perspective(50px) rotateX(45deg)
     }
     
     
    .box3 {
       background-color: sienna;
       transform: perspective(200px) rotateX(45deg)
     }
     
    .box4 {
       background-color:mediumvioletred;
       transform:rotateX(45deg)
     }  

• perspective-origin :
  定義透視圖的基準點，參數值為x軸與y軸，單位為百分比%、長度單位、方向關鍵字
  預設值為perspective-origin(50%,50%)
• backface-visibility :
  定義是否顯示背面內容，參數值為 visible(顯示) | hidden(隱藏)

參考資料:3dtransforms