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

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > jQuery和CSS3简单的3D旋转木马插件
jQuery和CSS3简单的3D旋转木马插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:07-20
    阅读:
简要教程

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

使用方法

使用该旋转木马插件需要引入jQuery和jquery.cubeSlider.js文件。

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.cubeSlider.js"></script>                
              
HTML结构

该旋转木马使用无序列表来制作,在每一个<li>元素中放置一个<div>作为显示的面。

<ul class="demo">
  <li><div>1</div></li>
  <li><div>2</div></li>
  <li><div>3</div></li>
  <li><div>4</div></li>
</ul>         
              
CSS样式

需要为该旋转木马特效添加下面的样式:

* {
  margin: 0;
  padding: 0;
}

.demo > li {
  float: left;
  list-style-type: none;
  position: absolute;
  opacity: 0.6;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
  text-align: center;
  color: #fff;
  font-size: 70px;
  cursor: pointer;
}

.demo {
  width: 100px;
  height: 100px;
  margin: 100px auto;
  -webkit-transform: rotateY(-10deg) rotateX(-20deg);
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 400px;
  position: relative;
}

.demo > li > div {
  background: #F44336;
  position: absolute;
  top: 10px;
  right: 10px;
  left: 10px;
  bottom: 10px;
}      
              
初始化插件

在页面加载完毕之后,可以通过下面的方法来初始化该旋转木马插件。

$('.demo').polygon(OPTIONS);                
              

配置参数

该旋转木马插件有三个配置参数。

  • width:旋转木马的宽度。
  • height:旋转木马的高度。
  • timer:自动播放的时间,设置为false表示不自动播放。