HEXAFLIP:灵活的3D魔方插件

所属分类:其他-动画效果

 31498  325  查看评论 (1)
分享到微信朋友圈
X
HEXAFLIP:灵活的3D魔方插件 ie兼容10

HexaFlip是一个JavaScript的UI插件,它可以让您使用3D立方体界面元素。创建插件的过程中,学习灵活的用户界面插件方面的一些最佳实践。

使用步骤

标记


 <div id="hexaflip-demo1" class="demo">  </div>

css

.hexaflip-cube {
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  text-rendering: optimizeLegibility;
  font-smoothing: antialiased;
  cursor: move;
  cursor: grab;
  display: inline-block;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s;
}


演示

  1. 默认:尝试用鼠标拖动立方体。

  2. 时间选择:拖动立方体或使用选择菜单来设置时间。

  3. 图片周期:影像数超过四个立方体面的通知。

  4. 视觉密码实验:密码为“红,黄,蓝,绿。”看,如果你能得到它。

相关插件-动画效果

按钮点击水波纹效果插件ripple.js

轻量级按钮点击水波纹效果,支持所有块级标签,使用非常简单。
  动画效果
 47516  528

背景彩带动画插件ribbon.js

只有1kb的javascript 可以使用 HTML5 画布在您的网站上生成背景彩带动画
  动画效果
 36302  409

苹果滑动解锁动画效果

苹果滑动解锁动画效果slide-to-unlock
  动画效果
 41420  289

很酷的jQuery文字切换动画

文字切换动画,很简单很实用,适合做SLOGAN
  动画效果
 32517  335

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ε? 0
    2016/2/2 15:02:48

    效果好炫,怎么感觉转动的时候有点不太灵活呢

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复