文章將陸續整理並更新至個人部落格。

今天不看 spec 哈哈，來現學現賣熱騰騰剛學到的新招式～
以前很俗的只知道一般的 rotate，完全不知道還有這玩意兒
簡單做幾個小 demo 測試測試～

語法

參考 MDN 定義

transform: rotate3d(x, y, z, deg)

• x： 繞著 X 軸旋轉。

• y： 繞著 Y 軸旋轉。

• z： 繞著 Z 軸旋轉。

• deg： 旋轉角度(deg)。

  • 正值 ⇒ 順時針旋轉。
  • 負值 ⇒ 逆時針旋轉。

註：
① 若 (x, y, z) = (0, 0, 0)，無法旋轉。
② 加上 perspective()。

簡單小範例

想像 Z 軸就是眼睛直視電腦螢幕的方向～

繞 X 軸旋轉

• 順時針旋轉 80 度。

transform: rotate3d(1, 0, 0, 80deg);

繞 Y 軸旋轉

• 順時針旋轉 80 度。

transform: rotate3d(0, 1, 0, 80deg);

繞 Z 軸旋轉

想像 Z 軸就是眼睛直視電腦螢幕的方向。

• 順時針旋轉 80 度。

transform: rotate3d(0, 0, 1, 80deg);

繞 X 、 Ｙ方向旋轉

• 順時針旋轉 90 度

transform: rotate3d(1, 1, 0, 90deg);

此時會繞著原點(0, 0, 0)與 (1, 1, 0)的兩點連線旋轉 90 度。

可以注意到，不管怎麼 rotate，中心點都不會改變，都是以(x, y, z)=(0, 0, 0) 為中心點在旋轉。若要改變中心點，可加上 translate3d()。晚點再來研究研究～ 掰拉～

參考資源

W3C-demo-rotate3d
W3C draft-rotate3d
MDN-rotate3d