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

cubeSlider是一款非常简单的jQuery和CSS3 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表示不自动播放。