10.3D變形

一、3D變形

1. transform: rotateX(angle), rotateY(angle), rotateZ(angle) (旋轉)
   transform: rotate3d(x, y, z, angle) (自訂向量旋轉)
   範例10-1
2. transform: translateX(length), translateY(length), translateZ(length) (平移)
   transform: translate3d(x, y, z)
3. transform: scaleX(number), scaleY(number), scaleZ(number) (縮放)
   transform: scale3d(x, y, z)
   因元素只有高度及寬度，而沒有深度，因此實際上只單獨使用scaleZ時，視覺上是沒改變的，配合translateZ使用時，會有加乘的效果, 如：
   transform: scaleZ(3) translateZ(10px)
   該元素會在Z軸上的 3 x 10px = 30px 的位置
   (搭配父元素的perspective才看得出效果)
4. matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) (矩陣方法)
   例如 matrix(a, b, c, d, tx, ty)，實際上就是
   matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的簡寫。
   如 (150, 150, 1) 經過 matrix3d(.8, 0, 0, 0, 0, .5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) 計算，會成為新的座標點(120, 75, 1)
   
5. transform: perspective(depth) (視角)
   決定人工視角在z軸上的移動量，例如perspective(250px) (即在z軸的250px位置) 元素會顯得大些，perspective(1000px)則跟原來大小沒啥差別
6. perspective: depth 與 perspective-origin: x% y% | x-pos y-pos | x-px y-px 屬性
   perspective屬性與perspective(depth)函數基本上作用相同，唯一的差別是perspective屬性只會應用到子元素上，而不是元素本身。
   perspective-origin則是決定視角在x及y軸上的移動量。
7. transform-origin: x% y% z% | x-pos y-pos z-pos | x-px y-px z-px(原點)
8. transform-style: flat | preserve-3d (變形平面)
   flat: 將子元素在同一個平面上變形 (預設)
   preserve-3d: 將子元素在個別的平面上變形
   transform-style屬性只會應用到子元素上，而不是元素本身。
9. backface-visibility: visible | hidden (是否顯示背面)
10. 練習10-1-翻轉名片：做一個不斷翻轉(rotateY)的名片，滑鼠移到元素上即暫停。