CSS，JS实现3D切割轮播图

第一步：我们首先要通过CSS来完成一个基本布局，利用 transform-style: preserve-3d设置成3D。
下面是CSS部分的代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li {
    list-style: none;
}
/* 轮播图 */
.homePage {
    width: 800px;
    height: 200px;
    margin: 150px auto;
    background-color: pink;
    position: relative;
    /* overflow: hidden; */
}

.homePage>ul {
    width: 100%;
    height: 100%;
}

.homePage>ul>li {
    width: 200px;
    height: 100%;
    float: left;
    transform-style: preserve-3d;
    position: relative;
    transition: all 1s;
}

.homePage>ul>li>span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.homePage>ul>li>span:nth-child(1) {
    background-image: url(../images/bxqy.jpg);
    transform: translateZ(100px);
}
.homePage>ul>li>span:nth-child(2) {
    background-image: url(../images/fczlm.jpg);
    transform: rotateX(90deg) translateZ(100px);
}
.homePage>ul>li>span:nth-child(3) {
    background-image: url(../images/hfh.jpg);
    transform: rotateX(180deg) translateZ(100px);
}
.homePage>ul>li>span:nth-child(4) {
    background-image: url(../images/ss.jpg);
    transform: rotateX(270deg) translateZ(100px);
}

/* 图片的定位 */
.homePage>ul>li:nth-child(2) span {
    background-position: -200px 0;
}
.homePage>ul>li:nth-child(3) span {
    background-position: -400px 0;
}
.homePage>ul>li:nth-child(4) span {
    background-position: -600px 0;
}

/* 小按钮 */
a {
    position: absolute;
    width: 30px;
    height: 70px;
    background-color: rgba(0,0,0,.2);
    text-decoration: none;
    color: #fff;
    top: 50%;
    margin-top: -35px;
    line-height: 70px;
    text-align: center;
    display: none;
}
.right {
    right: 0;
}

第二步：我们利用JS来调整图片运动时的切割速度以及方向。
下面是js的代码。

$(function(){
    var index = 0;
    var flag = true;
    var time = setInterval(move, 700);

    // 下一张
    function move(){
        if(!flag) return;
        flag = false;
        index++;
        $(".homePage>ul>li").css("transform","rotateX(" + (-90 * index) + "deg)").each(function(index,item){
            $(item).css("transition-delay",index * 0.2 + "s");
        });
    }

    // 移入移出
    $(".homePage").mouseenter(function(){
        clearInterval(time);
        $(".homePage>a").css("display","block");
    })
    $(".homePage").mouseleave(function(){
        time = setInterval(move, 700);
        $(".homePage>a").css("display","none");
    })

    // 点击左边按钮：上一张
    $(".left").on("click",function(){
        if(!flag) return;
        flag = false;
        index--;
        $(".homePage>ul>li").css("transform","rotateX(" + (-90 * index) + "deg)").each(function(index,item){
            $(item).css("transition-delay",index * 0.2 + "s");
        });
    })

    //  点击有面按钮：下一张
    $(".right").click(move);

    // 动画整个过渡结束之后，transitionend过渡完成时触发
    $("li:last").on("transitionend",function(){
        flag = true;
    })
})

最后：body区域代码如下

 <div class="homePage">
        <ul>
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
        </ul>
        <a class="left" href="javascript:;"><</a>
        <a class="right" href="javascript:;">></a>
    </div>
 
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/demo.js"></script>

`
注意：要利用 overflow: hidden;来隐藏切割时超出的部分。最后3D切割轮播图就完成了。