2013
May
18

YUI 3 還沒有物件旋轉的功能,最近因為需要用到旋轉的功能,所以我使用 CSS 3 transform 做一個 YUI 3 Rotate Plugin。

第一步是先寫一個 transform 相關的物件 ,實作 transform rotate 與 計算 Node 的旋轉角度。

接著再寫一個 rotate plugin , 將 Rotate 功能掛到 Node 上。

這些功能只有支援 CSS 3 transform 的 Browser 可以正確操作,如 : Chrome , Firefox 。

Rotate Plugin Demo

先來看個範例吧,

第一張圖只有旋轉的效果,選取下圖的左右兩點的其中之一,並進行拖拉即可旋轉。

第二張圖則是有 Drag , Resize, Rotate 三種功能。

Source Code


回應 (Leave a comment)