[TOC] # rotate3d()、scale3d()、translate3d() ## 旋轉-- :rotate(ndeg): `n正值` 順時針;`n負值` 逆時針 ## 扭曲-- :skew(xdeg,ydeg) skew的默認 `transform-origin` 是這個物件的中心點； 遵行**語義**來看待這個屬性. skew可以理解為沿著兩個點拉伸. x方向拉伸 `skewX(30deg)`：  y 方向拉伸 `skewY(30deg)`：  另外提一下，skew 可以可以達到 rotate 和 scale 的組合效果: skew(30deg, -30deg):  綜合： > `skewX(30deg)` 表示X軸朝逆時針方向旋轉`30deg`，坐標系上的物體也會隨著X軸旋轉。 > `skewY(30deg)` 表示Y軸朝順時針方向旋轉`30deg`，坐標系上的物體也會隨著Y軸旋轉。  > [css3中-webkit-transform 的 skew 如何使用？](https://www.zhihu.com/question/21725826/answer/995066455) ## 縮放-- :scale(x,y) 參數表示縮放倍數； 一個參數時：表示水平和垂直同時縮放該倍率 兩個參數時：第一個參數指定水平方向的縮放倍率，第二個參數指定垂直方向的縮放倍率。 scaleZ 單獨使用無效，必須配合其他三維變換屬性。 transform:scale(2,1.5):  transform:scaleX(2):  transform:scaleY(2):  ## 位移-- :translate(x,y) (不知道元素長和框的情況下也可以實現水平垂直居中) translateX(x):  translateY(y):  # 2D與3D 3D變形與2D變形最大的不同就在于其參考的坐標軸不同。2D變形的坐標軸是平面的，只存在x軸和y軸，而3D變形的坐標軸則是 `x、y、z` 三條軸組成的立體空間，`x` 軸正向、`y` 軸正向、`z` 軸正向分別朝向右、下和屏幕外   語法結構: `translate3d(x,y,z)` 參數解析: 1. x:表示在x軸方向的位移 2. y:表示在y軸方向的位移 3. z:表示在z軸方向的位移 比方說，我們設置元素`perspective`為201像素，如下： ```css perspective: 201px ``` 則其子元素，設置的 `translateZ` 值越小，則子元素大小越小（因為元素遠去，我們眼睛看到的就會變小）；`translateZ` 值越大，該元素也會越來越大，當 `translateZ` 值非常接近201像素，但是不超過201像素的時候（如200像素），該元素的大小就會撐滿整個屏幕（如果父輩元素沒有類似`overflow:hidden`的限制的話）。 因為這個時候，子元素正好移到了你的眼睛前面，所謂“一葉蔽目，不見泰山”，就是這么回事。 當 `translateZ` 值再變大，超過201像素的時候，該元素看不見了——這很好理解：**我們是看不見眼睛后面的東西的！** 元素在視點之外，因此是一片空白（看不見）。 ## perspective屬性的兩種書寫 perspective屬性有兩種書寫形式： 1. 用在舞臺元素上（動畫元素們的共同父輩元素） 2. 用在當前動畫元素上，與 `transform` 的其他屬性寫在一起。 `perspective` 屬性和 `perspective()` 函數所起的功能是一樣的，但其取值以及以運用的對像有所不同： 1. `perspective`屬性可以取值為`none`或長度值；而`perspective()`函數取值只能大于0，如果取值為0或比0小的值，將無法激活3D空間； 2. `perspective`屬性用于變形對像父元素；而`perspective()`函數用于變形對像自身，并和`transform`其他函數一起使用。 如下代碼示例： ```css .stage { perspective: 600; /*或者 600px 因為默認以像素計*/ } ``` 以及： ```css #stage .box { transform: perspective(600) rotateY(45deg); } ``` 目前`skew`無Z軸的傾斜，只能在二維平面使用。 設置`transform-style`的值為`preserve-3d`值，建立一個3D渲染環境。 `perspective-origin`屬性需要與`perspective`屬性結合起來使用，以便將視點移至元素的中心以外位置 [詳解CSS3的perspective屬性設置3D變換距離的方法](http://www.jb51.net/css/462429.html) ## transform-origin 語法結構: *注意：如果只設置一個x值，則y值保持默認50%不變。* 在一些瀏覽器之下依然需要添加各瀏覽器私有屬性。 ```css transform-origin(50%,50%) -webkit-transform-origin: 100% 100%; ``` `transform-origin(25%,75%)`:  如果我們把元素變換原點（`transform-origin`）設置`0(x) 0(y)`，這個時候元素的變換原點轉換到元素的左頂角處，如下圖所示：  示例： `transform-origin`取值為`right top`（或`top right`或`100％ 0`）：  注意： 雖然元素的變形原點通過`transform-origin`從`50% 50%`變成`100% 100%`，但元素位移 `translate()` 始終是依元素中心點進行位移，如下圖所示：  ## 多重變形 用法：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px); 這四種變形方法順序可以隨意，但不同的順序導致變形結果不同，原因是變形的順序是從左到右依次進行，這個用法中的執行順序為： 1.rotate 2.scalse 3.skew 4.translate # matrix()矩陣 > [理解矩陣乘法](http://www.ruanyifeng.com/blog/2015/09/matrix-multiplication.html)<br /> > [隨記：我們需要怎樣的數學教育？](http://www.matrix67.com/blog/archives/4294)<br /> 那你有沒有想過，為什么 `transform:rotate(45deg)` 會讓元素旋轉`45°`, 其后面運作的機理是什么呢？ ### 矩陣matrix(a,b,c,d,e,f)  [玩我吧](http://peterned.home.xs4all.nl/matrices/#1.202,-0.169,-0.089,1.156,11.375,-78.947) 6個屬性的意思的： 第一個`a`：寬度比例，1就是原大小， 第二個`b`：上下傾斜，1就是2倍，2就是3倍， 第三個`c`：左右傾斜，數字和第二個一樣的意思， 第四個`d`：高度比例，1就是原大小， 第五個`e`：X方向的像素位移，X方向就是左右， 第六個`f`：Y方向的像素位移，Y方向就是上下 。 IE有對應的濾鏡：` filter: progid:DXImageTransform.Microsoft.Matrix ` 下面這張圖可以解釋上面的疑問：  無論是旋轉還是拉伸什么的，本質上都是應用的`matrix()`方法實現的（修改`matrix()`方法固定幾個值），只是類似于`transform:rotate`這種表現形式，我們更容易理解，記憶與上手。 換句話說，理解`transform`中`matrix()`矩陣方法有利于透徹理解CSS3的`transform`屬性。 > [CSS3 2D Transform 詳細講解](http://blog.sae.sina.com.cn/archives/1426) > [CSS3——CSS3 矩陣 matrix 進行 2D 變換的數學原理](http://www.pianshen.com/article/125715619/) > [從矩陣與空間操作的關系理解 CSS3 的 transform（科普文）](https://zhuanlan.zhihu.com/p/50525974) > [前端筆記：Transfrom: Matrix () 參數配置筆記](https://medium.com/@Pudge1996/%E5%9C%B0%E7%90%83%E4%BA%BA%E9%83%BD%E8%83%BD%E7%9C%8B%E6%87%82%E7%9A%84-transfrom-matrix-%E5%8F%82%E6%95%B0%E9%85%8D%E7%BD%AE%E7%AC%94%E8%AE%B0-70c6038d2ce2) # 模糊問題 `transform:translateZ()`字體模糊問題 父類重返Z軸平面 ## 其他問題 [賢心博客-transform你不知道的那些事](http://sentsin.com/web/999.html) # 參考 [CSS3 - 轉換](https://michaelwang.top/2019/11/05/CSS3-%E8%BD%AC%E6%8D%A2/) https://www.baidu.com/s?ie=UTF-8&wd=%E6%B5%85%E8%B0%88chrome+dev+tools%E7%AF%87%E4%BA%8C%EF%BC%9Aconsole%E4%BD%A0%E7%9A%84%E6%A0%B7%E5%BC%8F [CSS3 Matrix simulator](https://codepen.io/ArnoldsK/pen/dizBx) http://sentsin.com/web/1116.html > 參考：http://www.w3cplus.com/ 和其他博客