这个 CSS3 类似于幻灯片旋转的效果，是一个比较有意思并且比较受欢迎的特效。之前没有去研究过，无意在博客上看到 Wenzi 写了这个东西，来看看他的代码是怎么实现的。
CSS 定位还是比较简单的，使用绝对定位加上 z-index 就能够实现上面的效果。
要想改变幻灯片的位置，有三点：位置、大小、层次。
看起来像是 div 进行了移动，实际上并没有，只是切换了每个元素的 class，于是幻灯片就发生了翻转。
其实原理就是这样的： 不进行DOM的增删，为每个位置上的div都写上特定的样式，每个div都进行绝对定位，然后进行样式的轮播。 每次切换都有个0.6s过渡过程：
-webkit-transition: all 0.6s;
transition: all 0.6s;比如从左往右的class分别为：item_0, item_1, item_cur, item_3, item_4，每个class都是当前所在div的定位，向左滑动时，右边的div会切换到中间，这样class从左往右就变成了item_1, item_cur, item_3, item_4,item_0。
HTML代码：
<div class="demo">
<div class="item item_0">1</div>
<div class="item item_1">2</div>
<div class="item item_cur">3</div>
<div class="item item_3">4</div>
<div class="item item_4">5</div>
</div>
<div class="demo_btn">
<a href="javascript:;" class="left" title="向左移动"><<</a>
<a href="javascript:;" class="right" title="向右移动">>></a>
<p>（PC下可点击按钮切换，移动端可左右滑动切换）</p>
</div>
CSS：
.demo {
position: relative;
height: 320px;
/*margin-top: 1rem;*/
width: 100%
}
.demo .item {
position: absolute;
left: 50%;
bottom: 0;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
-webkit-transition: all 0.6s;
transition: all 0.6s;
width: 222px;
height: 300px;
/*border: 1px solid #ccc;*/
text-align: center;
line-height: 300px;
z-index: 1;
font-size: 74px;
color: #fff;
}
.demo .item_cur {
z-index: 3
}
.demo .item_0 {
-webkit-transform: translate3d(-104%, 12%, 0) scale3d(0.5, 0.5, 1);
transform: translate3d(-104%, 12%, 0) scale3d(0.5, 0.5, 1)
}
.demo .item_1 {
-webkit-transform: translate3d(-81%, 9%, 0) scale3d(0.7, 0.7, 1);
transform: translate3d(-81%, 9%, 0) scale3d(0.7, 0.7, 1);
z-index: 2
}
.demo .item_3 {
-webkit-transform: translate3d(-20%, 9%, 0) scale3d(0.7, 0.7, 1);
transform: translate3d(-20%, 9%, 0) scale3d(0.7, 0.7, 1);
z-index: 2
}
.demo .item_4 {
-webkit-transform: translate3d(4%, 12%, 0) scale3d(0.5, 0.5, 1);
transform: translate3d(4%, 12%, 0) scale3d(0.5, 0.5, 1)
}
.demo_btn{
text-align: center;
}
JavaScript代码：
(function(){
var getRandomColor = function(){
return '#'+Math.floor(Math.random()*16777215).toString(16);
}
var egg_change = function(type){
var $demo = $('.demo'),
index = parseInt( $demo.attr('index_cur')||2 ),
$item = $('.demo .item'),
len = $item.length;
if( type=='left' ){
index = (index+1)%len;
}else{
index = (index-1+len)%len;
}
$demo.attr('index_cur', index);
$item.removeClass('item_0 item_1 item_3 item_4 item_cur');
$item.eq( (index-2+len)%len ).addClass('item_0');
$item.eq( (index-1+len)%len ).addClass('item_1');
$item.eq(index).addClass('item_cur');
$item.eq( (index+1)%len ).addClass('item_3');
$item.eq( (index+2)%len ).addClass('item_4');
}
$('.item').each(function(){
$(this).css('background-color', getRandomColor());
})
$('.demo').on('swipeLeft', function(){
egg_change( 'left' );
}).on('swipeRight', function(){
egg_change( 'right' );
});
$('.demo_btn').on('click', '.left', function(){
egg_change( 'left' );
}).on('click', '.right', function(){
egg_change( 'right' );
})
})();
虽然用 CSS3 效果实现起来很赞，但是却不兼容 IE9 以下的，下一篇我将试着改为支持 IE 全系列，考虑用 jQuery 动画来实现。
