文章將陸續整理並更新至個人部落格。
今天不看 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 軸
就是眼睛直視電腦螢幕的方向~
transform: rotate3d(1, 0, 0, 80deg);
transform: rotate3d(0, 1, 0, 80deg);
想像 Z 軸
就是眼睛直視電腦螢幕的方向。
transform: rotate3d(0, 0, 1, 80deg);
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