CSS 前端工程

CSS transform

在研究 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);

上述幾個例子可以看到:

  1. CSS 座標系基本上是左手座標系,X朝右,Y朝下,Z出螢幕。
  2. rotate/scale 時需要考慮原點,在 transform-origin 沒有指定的情況下,預設值是沿著中心旋轉 (如綠色div的中心),與 parent box 無關。
  3. 如果下多個 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 的中心。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。