jQuery和CSS3简单的3D旋转木马插件

发表于2015-07-31
评论0 1.1k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏程序行业精英群

711501594
  摘要: cubeSlider是一款非常简单的jQuery和CSS3 3D旋转木马特效插件。该插件会根据HTML结构中li元素的数量来创建相应面数的旋转木马。使用上非常简单,效果也十分不错。 ...
  简要教程
  cubeSlider是一款非常简单的jQuery和CSS3 3D旋转木马特效插件。该插件会根据HTML结构中li元素的数量来创建相应面数的旋转木马。使用上非常简单,效果也十分不错。

4.jpg

  使用方法
  使用该旋转木马插件需要引入jQuery和jquery.cubeSlider.js文件。
  1. <noxss src="js/jquery-2.1.4.min.js"></script>
  2. <noxss src="js/jquery.cubeSlider.js"></script>

  HTML结构
  该旋转木马使用无序列表来制作,在每一个<li>元素中放置一个<div>作为显示的面。
  1. <ul class="demo">
  2. <li><div>1</div></li>
  3. <li><div>2</div></li>
  4. <li><div>3</div></li>
  5. <li><div>4</div></li>
  6. </ul>

  CSS样式
  需要为该旋转木马特效添加下面的样式:
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }

  5. .demo > li {
  6. float: left;
  7. list-style-type: none;
  8. position: absolute;
  9. opacity: 0.6;
  10. transition-property: all;
  11. transition-duration: 1s;
  12. transition-timing-function: ease-in-out;
  13. text-align: center;
  14. color: #fff;
  15. font-size: 70px;
  16. cursor: pointer;
  17. }

  18. .demo {
  19. width: 100px;
  20. height: 100px;
  21. margin: 100px auto;
  22. -webkit-transform: rotateY(-10deg) rotateX(-20deg);
  23. -webkit-transform-style: preserve-3d;
  24. -webkit-perspective: 400px;
  25. position: relative;
  26. }

  27. .demo > li > div {
  28. background: #F44336;
  29. position: absolute;
  30. top: 10px;
  31. right: 10px;
  32. left: 10px;
  33. bottom: 10px;
  34. }

  初始化插件
  在页面加载完毕之后,可以通过下面的方法来初始化该旋转木马插件。
  1. $('.demo').polygon(OPTIONS);

  配置参数

  该旋转木马插件有三个配置参数。
  •   width:旋转木马的宽度。
  •   height:旋转木马的高度。
  •   timer:自动播放的时间,设置为false表示不自动播放。

  以下两个插件你可能会喜欢:

  jQuery和CSS3炫酷响应式支持触摸屏的3D旋转木马特效

  高性能的jQuery/Zepto 3D旋转木马插件
 

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台