CSS transform

商業，創業，業務，職涯，美食，葡萄酒，閱讀，網路科技。
從 Larry 創業以及商業的經驗，希望以白話的口吻，介紹給大家這個商業的世界。
FB粉絲頁 Larry的午茶時光
IG Larry的午茶時光歡迎大家追蹤～

在研究 CSS transform 之前我們可以先理解一下 Graphics pipeline. Graphics pipeline 基本上就是 model -> view -> project -> viewport (與一般我們說的 MVC 等 modeling 概念無關)，這 pipeline 其實就是矩陣相乘。也可以說，建模人員在 3ds Max 或是 Maya 做好一個人物、物品、場景，經過上述矩陣相乘後，就是你在畫面上看到的影像。暫時找到下面這個網頁，參考他的 “4.1 Coordinates Transformation”
https://www3.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html

給兩個 div, 紅的是 transform 前，綠的是 transform 後，顯示如下：

transform: rotate(30deg);

transform: translate(50px, 10px);

transform: scale(1.2, 0.5);

transform: rotate(30deg) translate(100px, 0px);

transform: translate(100px, 0px) rotate(30deg);

上述幾個例子可以看到：

CSS 座標系基本上是左手座標系，X朝右，Y朝下，Z出螢幕。
rotate/scale 時需要考慮原點，在 transform-origin 沒有指定的情況下，預設值是沿著中心旋轉 (如綠色div的中心)，與 parent box 無關。
如果下多個 transform matrix, 如同時下 translate 和 rotate, 先執行右邊的。要注意的是，先 translate 再 rotate 時，rotate 依據的原點是 translate 之前的原點，如上方第四個例子。

我想本篇最大的目的就是搞清楚座標系，3D transform 其實也類似。translateX/Y/Z 簡單，一樣X朝右，Y朝下，Z出螢幕。rotateX/Y/Z 分別是依照 X/Y/Z 軸旋轉，一樣是左手座標系。scaleX/Y/Z 也是依照 X/Y/Z 軸縮放，與 rotate 一樣這邊的 X/Y/Z 軸預設都是 div 的中心。