transform 屬性
transform 語法用來翻轉區塊，但不適用於「行內元素」(inline element)，除非把行內元素設定為 inline-block 或是 block。
＊如果不清楚「行內元素」是什麼，可以參考這篇：行內元素 inline element 和區塊元素 block element
的差別。
移動或翻轉可以沿 X, Y, Z 三個座標方向，X 軸就是水平方向，Y 軸是垂直方向，而 Z 軸可以想像是從螢幕指向我們的眼睛的方向。(希望你不是坐斜斜的)
transform 的宣告都是從「transform:」開始，然後才接下面的各種值。
比如：transform:translate(50px, 20px) scale(2);
translate() 平移
translateX() 和 translateY() 可以用來平移元素，可以為正值或負值，也可以使用長度單位或是%。
比如說 translateX(250px); 就是往右移250px、translateY(-300)就是往上移 300px。translateX() 和 translateY() 可以用 translate() 合併宣告，第一個值視為X 第二個值為 Y。
▼比如說 translate(50px, 20px)，就是往右移50px 往下移 20px。
要注意 translate() 函式算是 transform 的值，而不是屬性，所以宣告方式為：
transform: translate(50px, 20px);
▼如果是用百分比當作單位，是以元件的寬和高為基準，比如說一個寬 200px 的元素，translateX(10%) 就會往右移 20px。
translateZ()
translateZ() 用來表示在Z軸上的移動，只能使用長度單位，不能使用% 。所有Z軸的設定都不能用百分比為單位，畢竟螢幕上那個薄薄的一片影像，預設是沒有深度的。
translate3d()
translate3d() 就是把 X, Y, Z 軸一起合併宣告，一定要宣告3個值，如：translate3d(20px, 2em, 0)，不然不會作用。
當我們沒有旋轉元件時，Z 軸的位移變化是看不出來的。
scale() 縮放
如同 translate() 一樣 scale() 系列也包含 scaleX(), scaleY(), scaleZ() 和 scale3d()
scale() 的值為倍數，也就是 scaleX(1.5) 的意思為寬度變為 1.5 倍。
當使用 scale() 函數時 如果只宣告一個值，如 scale(2) 則表示長、寬都變兩倍，而不是只改變寬。
scaleZ() 可以讓元素沿著Z軸縮放，而 scale3d() 和 translate3d() 一樣，都需要設定三個值才會有作用。
transform-style
預設值是 flat ，但如果想要呈現個物件的3d透視關係，就要宣告為 transform-style:preserve-3d
例：未宣告(保留預設值flat)，無法呈現子元件的 3d 空間關係
例：在親代元件宣告 transform-style: preserve-3d; 可以呈現出親代和子代的 3d 空間關係。
rotate() 旋轉
rotate() 函數系列還包含 rotateX(), rotateY(), rotateZ()，值的單位是角度如 deg, grad, rad, turn
▼rotateX(45deg) 意思就是以 X 軸為軸心，往上翻 45 度。
▼我們也可以用 rotate3d() 來一次設定三個維度的旋轉， retate3d() 有4個值，前三個代表 X, Y, Z 的旋轉「基於第4個值的倍數」，比如說 rotate3d(-0.5, 0.5, 1, 60deg) 意思就是以X軸為軸心往下轉30度、以Y軸為軸心往右轉30度，再往順時針方向(Z軸)轉60度。
skew() 歪斜
skew() 可以讓元素以 X 軸或 Y 軸為基準歪斜，沒有沿 Z 軸歪斜的值。
▼例：transform: skewX(20deg) 顯示為
▼例：transform: skewY(20deg) 顯示為
skew(a,b)
skew(a,b) 同時宣告 X 軸和 Y 軸的歪斜，但是結果和 skewX(a) 加上 skewY(b) 運算的方式不太一樣，呈現結果也有所不同。
▼例：transform: skew(-30deg, 20deg);
perspective() 透視點
perspective() 是用來表示單點透視的透視點距離，距離越長，變形越不嚴重，反之距離越短，透視效果越誇張。
perspective() 只作用在單一元件，和 perspective 屬性作用在所有子項目不一樣。
一般來說 perspective() 的值介於 500px ~ 1000px 之間看起來較自然。
▼例：transform: perspective(200px) rotateX(45deg);;
▼例：transform: perspective(800px) rotateX(45deg);;
perspective 屬性透視點
perspective 和上一段的 perspective() 不一樣，perspective() 是 transform 屬性的值，只作用在單一元素；perspective 則是作用在所有子項目。兩者使用的單位都一樣是長度單位，如px
▼transform: perspective(300px) 的例子如下，每個元素各自有自己的透視點：
▼perspective:300px; 的例子如下，各個元素共享親項目的透視點（須在親代項目宣告）：
perspective-origin 移動透視點
表示方式為 perspective-origin: a b 初始值是 50% 50%
第一個值表示透視消失點沿 X 軸移動，小於50% 是向左移動，大於50%是向右移動，第二個值是沿Y軸移動，小於 50% 是往上移動，反之大於 50% 則是往下移動。
例:▼未移動透視點
▼移動透視點 perspective-origin: -20% 100%;
perspective-origin 的值也可以用 top, bottom, left, center, right 等來表示。
transform-origin 移動變形中心點
如果你有使用過 3D 軟體，或是做 2D 動畫，就會知道物件中心點的設定，對於很多動作都會產生關鍵性的影響。
transform-origin 的初始值是 50% 50% 也就是在物件長跟寬的中心點，第一個值是宣告x軸方向的位置，第二個值是宣告中心點位於y軸上的位置。如果設定 transform-origin:0 0 則中心點會落在左上角、transform-origin: 50% 100% 中心點則會居中位於元件下緣。
▼例：未更改物件中心點 rotateZ(45deg);
▼例：更改物件中心點transform-origin: 50% 100%; transform: rotateZ(45deg);
transform-origin 的值也可以用 top, bottom, left, center, right 等來表示。
backface-visibility 元件背面顯示
元件背面是否顯示，預設值是 visibility，若宣告值為 hidden 則當元素翻面時會看不見。