这个 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>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
<div>
    <a href="javascript:;" title="向左移动">&lt;&lt;</a>
    <a href="javascript:;" title="向右移动">&gt;&gt;</a>
    <p>（PC下可点击按钮切换，移动端可左右滑动切换）</p>
</div>

CSS：

.demo {
        position: relative;
        height: 320px;
        /*margin-top: 1rem;*/
        width: 
    }

    .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实现卡牌的旋转切换效果 虽然用 CSS3 效果实现起来很赞，但是却不兼容 IE9 以下的，下一篇我将试着改为支持 IE 全系列，考虑用 jQuery 动画来实现。