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)