菜单

立体旋转
立体旋转是将一个三维的对象显示在二维的平面上

下载

类型

立体旋转 (Shape)

标准的立体旋转

斯蒂夫·乔布斯
斯蒂夫·乔布斯是一个伟大的设计者。
2014年参加 151个朋友
Stevie Feliciano
2014年加入
Stevie Feliciano是一个生活在纽约的图书馆学家。她喜欢把时间花在读书、跑步和写作上。

立方体 (Cube)

立方体形状每一边都是立方体的面

1
2
3
4
5
6

文本 (Text)

文本型状允许文本内容分别在多个边中被显示出来

使用形状
  • 形状必须定义每个边的宽度和高度,否则文本流在动画中可能会发生变化
  • 该模块采用3D转换,目前只支持在Chrome,Safari和Firefox的现代版本。
你知道吗?这一边开始可见。
看吧,这是另一边!
这是最后一边

例子

形状类型 (Shape Types)

没有规则的形状或其边与长度和宽度匹配,那么会正确的变化。

形状

自动
正方形
不规则

入门

需要标记 (Required Markup)

形状可以有任意的内容,只需将每一方包在side中。

这一边开始可见。
这是另一边
T这是最后一边

JS动画 (Animating with Javascript)

动画使用CSS3和JavaScript来进行过渡。

初始化形状

$('.shape').shape();

旋转自动假设下一边是下一个 (如果是最后一个就回到第一个)

$('.shape').shape('flip up');

若要手动设置下一个侧面,请使用选择器或jQuery对象

$('.shape') .shape('set next side', '.second.side') .shape('flip up') ;

任何内部方法都可以编程调用

$('.shape').shape('repaint');

行为

以下所有的行为都可以用语法来调用:

$('.your.element') .shape('behavior name', argumentOne, argumentTwo) ;
行为 描述
flip up 向上翻转形状
flip down 向下翻转形状
flip right 向右翻转形状
flip left 向左翻转形状
flip over 顺时针翻转形状
flip back 逆时针翻转形状
set next side(selector) S设置下一个边到特定的选择器
is animating 返回形状当前是否正在动画
reset 移除所有的内联样式
queue(animation) 在当前动画后排列一个动画链
repaint 促使元素回流
set default side 设置下一个边成为下一个成员的活动元素
set stage size 设置形状为下一个边的内容大小
refresh 为元素边刷新选择器缓存
get transform down 另一边变换到上面
get transform left 另一边变换到左面
get transform right 另一边变换到右面
get transform up 另一边变换到上面
get transform down 另一边变换到下面

形状设置
形状设置修改形状的行为

设置 默认 描述
duration 700ms 动画持续时间
width
2.2
initial
当设置为 next 时会使用下一个 side 的宽。
当设置为 initial 时会使用初始化时候的宽。
当设置为指定像素宽时,将强制宽度到那个宽度。
height
2.2
initial
当设置为 next 时会使用下一个 side 的高。
当设置为 initial 时会使用初始化时候的高。
当设置为指定像素高时,将强制宽度到那个高度。

回调函数
回调函数特指一个函数的执行在某一动作之后

设置 语境 描述
beforeChange Next Side 在边变化之前被调用
onChange Active Side 在边变化之后被调用

DOM 设置
DOM设置指定该模块应该如何与DOM接口

设置 默认 描述
namespace shape 事件的命名空间.确保不受其他元素影响。
selector
selector : { sides : '.sides', side : '.side' }
className
className : { animating : 'animating', hidden : 'hidden', loading : 'loading', active : 'active' }

调试设置
调试设置控制调试输出到控制台

设置 默认 描述
name Shape 调试日志中使用的名称
silent False 关闭所有输出,包括错误
debug False 提供标准的调试输出到控制台
performance True 提供标准的调试输出到控制台
verbose True 提供辅助的调试输出到控制台
error
error: { side : 'You tried to switch to a side that does not exist.', method : 'The method you called is not defined' }