iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 21
2

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


今天不看 spec 哈哈,來現學現賣熱騰騰剛學到的新招式~
以前很俗的只知道一般的 rotate,完全不知道還有這玩意兒 /images/emoticon/emoticon25.gif
簡單做幾個小 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 、 Y方向旋轉

  • 順時針旋轉 90 度
transform: rotate3d(1, 1, 0, 90deg);

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



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


/images/emoticon/emoticon34.gif




參考資源

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


上一篇
淺談 line box 高度
下一篇
替換元素 replaced element
系列文
前端新手進化史30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言