[TOC] # matrix、matrix3d `matrix()`?用六個指定的值來指定一個均勻的二維（2D）變換矩陣。這個矩形中的常量值是不作為參數進行傳遞的，其他的參數則在主要列的順序中描述。 `matrix(a, b, c, d, tx, ty)`是`matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)`的簡寫 > translate、scale、rotate、skew 本質上都是應用的matrix()方法實現的（修改matrix()方法固定幾個值） <br> 屬性值 * a b c d：以`number` 的格式來描述線性變換 * tx ty：以`number` 的格式來描述變換的量 <br> `matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) ` 用一個 4?× 4 的齊次矩陣來描述一個三維（3D）變換。16個參數都在主要列的順序中描述。 <br> 參數 * a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 d4：以 <number> 的格式來描述線性變換 * a4 b4 c4：以 <number> 的格式來描述變換的量 <br> <br> # rotate、rotate3d、rotateX, rotateY, rotateZ `rotate()` CSS 函數 定義一個旋轉屬性，將元素在不變形的情況下旋轉到不動點周圍(如 transform-origin 屬性所指定) 。 移動量由指定角度定義;如果為正值，則運動將為順時針，如果為負值，則為逆時針 。 180°的旋轉稱為點反射 (point reflection)。  參數 a：該參數表示 <angle> 代表旋轉的角度。正角表示順時針旋轉，負角表示逆時針旋轉。 <br> <br> `rotate3d(x, y, z, a)` 定義一個變換，它將元素圍繞固定軸移動而不使其變形。運動量由指定的角度定義;?如果為正，運動將為順時針，如果為負，則為逆時針。 <br> 在3D空間之中，旋轉有3個自由維度，描述了旋轉軸。旋轉軸由一組 \[x, y, z\] 矢量定義，并且通過變換源點傳遞（即通過 transform-origin CSS 屬性定義）。如果這些矢量被賦予非標準值，即3個坐標值的平方和不等于1時，它將會被內部隱式標準化。非標準矢量，例如空值和 \[0, 0, 0\]，將會使旋轉不起作用，但是不影響整個CSS屬性的其他效果。 <br> 值 x： 類型，可以是0到1之間的數值，表示旋轉軸X坐標方向的矢量。 y： 類型， 可以是0到1之間的數值，表示旋轉軸Y坐標方向的矢量。 z： 類型， 可以是0到1之間的數值，表示旋轉軸Z坐標方向的矢量。 a： 類型，表示旋轉角度。正的角度值表示順時針旋轉，負值表示逆時針旋轉。 <br> transform: rotate3d(0);  <br> transform: rotate3d(1, 1, 1, 45deg);  <br> <br> # scale、scale3d、scaleX、scaleY、scaleZ scale() CSS 函數可改變元素的大小。 它可以增大或減小元素的大小，并且縮放量由矢量定義，并且它可以使在一個方向上比另一個方向更多。 這種變換的特點是矢量的坐標可定義在每個不同方向上各子完成一定比例縮放。如果矢量的兩個坐標相等，則縮放是均勻的或各向同性的，并且元素的形狀被保留。在這種情況下，縮放函數定義了一個同調變換。 當超出 [-1, 1]范圍外時，縮放將在坐標方向上放大元素；當在該范圍內時，它在該方向收縮元素。當等于1時，它什么也不做，當它為負時，它執行點反射和大小修改。  <br> <br> # skew、skewX、skewY `skew()`這個CSS函數是一種用于拉伸，或者說是平移，該函數會使得在每個方向上扭曲元素上的每個點以一定角度。這是通過將每個坐標增加一個與指定角度成比例的值和到原點的距離來完成的。離原點越遠，拉伸的值就越大。 ~~~ skew(ax) 或 skew(ax, ay) ~~~ ax：該參數為一個角度 `angle`， 表示用于沿橫坐標扭曲元素的角度 。 ay：該參數為一個角度 `angle`， 表示用于沿縱坐標扭曲元素的角度 。 <br> <br> # translate、translate3d、translateX、translateY、translateZ `translate()`這個CSS 函數用于移動元素在平面上的位置。這種變換的特點是矢量的坐標定義了它在每個方向上的移動量。  參數 * tx：該參數為 `length` ，表示要移動矢量的橫坐標。 * ty：該參數為 `length` ，表示要移動矢量的縱坐標。 如果不寫，則默認與 tx 值相等，例如 : translate(2) 表示 translate(2, 2)。 <br> `translate3d()`這個CSS 函數用于移動元素在3D空間中的位置。這種變換的特點是三維矢量的坐標定義了它在每個方向上的移動量。 * tx：該參數為`length` ，代表移動矢量的橫坐標。 * ty：該參數為 `length` ，代表移動矢量的縱坐標。 * tz：該參數為 `length` 代表移動矢量的z軸坐標。 該值不能使用百分比 `percentage` ；如果使用會被認為是無效屬性。 <br> <br> # perspective 指定了觀察者與z=0平面的距離，使具有三維位置變換的元素產生透視效果。z>0的三維元素比正常大，而z<0時則比正常小，大小程度由該屬性的值決定。 <br> 默認情況下，消失點位于元素的中心，但是可以通過設置perspective-origin屬性來改變其位置。 <br> 當該屬性值不為0和none時，會創建新的層疊上下文。  <br> <br>  上圖中眼睛位置相關的三個坐標可以借由這些屬性調整： * p：`perspective` * 眼睛的x和y：`perspective-origin` <br> <br> # perspective-origin 指定了觀察者的位置，在屬性perspective中被用作消失點。  <br> <br> # transform-box 定義了與transform以及transform-origin屬性相關的布局框 <br> 值 * border-box：使用邊框作為參考框。表的參考框是包裹著該表的邊框，而不是其表框。 * fill-box：使用對象邊界框作為參考框。 * view-box：使用最近的SVG視口作為參考框。如果viewBox屬性為創建SVG視口元素指定了一個值，則參考框位于由viewBox屬性建立的坐標系的原點處，并且參考框的尺寸被設置為該viewBox屬性的寬度和高度值。 <br> <br> # transform-style 確定元素的子元素是否位于3D空間中，還是在該元素所在的平面內被扁平化。 如果被扁平化，則子元素不會獨立的存在于三維空間。 因為該屬性不會被（自動）繼承，所以必須為元素所有非葉子后代節點設置該屬性。 <br> 值 * preserve-3d：指定子元素定位在三維空間內。 * flat：指定子元素位于此元素所在平面內。  <br> <br> # transform-origin [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin) 更改一個元素變形的原點。  transform-origin: center;  transform-origin: top left;  <br> <br> # backface-visibility 指定當元素背面朝向觀察者時是否可見。元素的背面總是透明的，當其朝向觀察者時，顯示正面的鏡像。 在某些情況下，我們不希望元素內容在背面可見，比如實現翻牌效果。 因為2D變換無透視效果，故該屬性對2D變換無效。 <br> <br> 值： * visible：表示背面可見，允許顯示正面的鏡像。 * hidden：表示背面不可見 <br> backface-visibility: visible;  backface-visibility: hidden;  # 參考資料 [transform-function - MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function) [好吧，CSS3 3D transform變換，不過如此！](https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/)