3D切割轮播图(H5C3)

版权声明:部分来源于网络仅供学习交流 https://blog.csdn.net/Chad97/article/details/83275166

效果

在这里插入图片描述

页面结构

<div class="box">
    <ul class="imageBox">
        <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>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
    </ul>
    <!-- 转义符 \  实体 &lt; -->
    <a class="left" href="javascript:;">&lt;</a>
    <a class="right" href="javascript:;">&gt;</a>
</div>

CSS:

 * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 560px;
            height: 300px;
            margin: 100px auto 0;
            border: 1px solid #ccc;
            position: relative;
        }
        .box .imageBox {
            list-style: none;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
        }
        .box .imageBox li {
            width: 112px;
            height: 100%;
            float: left;
            position: relative;
            /*3d呈现*/
            transform-style: preserve-3d;
            /*加过渡*/
            transition:all 1s ease;
        }
        .box .imageBox li span{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url("images/1.jpg") no-repeat;
        }
        /*拼接立体容器*/
        /*1.立体容器旋转中心要在电脑平面上*/
        /*2.立体容器每一个面的图片正面朝外*/
        .box .imageBox li span:nth-child(1){
            background-image: url("images/1.jpg");
            transform: translateZ(150px);
        }
        .box .imageBox li span:nth-child(2){
            background-image: url("images/2.jpg");
            /*旋转过后轴也会旋转::::::*/
            transform: rotateX(90deg) translateZ(150px);
        }
        .box .imageBox li span:nth-child(3){
            background-image: url("images/3.jpg");
            transform: rotateX(180deg) translateZ(150px);
        }
        .box .imageBox li span:nth-child(4){
            background-image: url("images/4.jpg");
            transform: rotateX(270deg) translateZ(150px);
        }

        /*拼接背景*/
        .box .imageBox li:nth-child(1) span{
            background-position: 0 0;
        }
        .box .imageBox li:nth-child(2) span{
            background-position: -112px 0;
        }
        .box .imageBox li:nth-child(3) span{
            background-position: -224px 0;
        }
        .box .imageBox li:nth-child(4) span{
            background-position: -336px 0;
        }
        .box .imageBox li:nth-child(5) span{
            background-position: -448px 0;
        }
        .box .left,
        .box .right{
            position: absolute;
            width: 50px;
            height: 70px;
            background: rgba(0,0,0,.2);
            top:115px;
            text-align: center;
            line-height: 70px;
            font-size: 20px;
            color: #fff;
            text-decoration: none;
            font-weight: bold;
        }
        .box .right{
            right: 0;
        }

注:

-如果不需要切割的效果,只要3D转换的效果把each去掉

jQuery

$(function () {
//定义一个索引
    var index=0;
    var flag=true;
    $('.left').on('click',function () {
        if (!flag) return false; //节流阀
        flag=false;
        index --;
        console.log(index);
        let angle= - index*90;
        $('.imageBox>li').css('transform','rotateX('+angle+'deg)').each(function (i,item) {
            //设置不同的延时
            $(this).css('transition-delay',i*0.25+'s');
        });
    });

// 3.点击右边按钮下一张
    $('.right').on('click',function () {
        if (!flag) return false; //节流阀

        flag=false;
        index ++;
        console.log(index);
        let angle= - index*90;
        $('.imageBox>li').css('transform','rotateX('+angle+'deg)').each(function (i,item) {
            //设置不同的延时
            $(this).css('transition-delay',i*0.25+'s');
        });
        /*4.优化 重复点击的时候动画会层叠的执行  节流阀 */
    });

    $('.imageBox>li:last').on('transitionend',function () {//监听最后一个li 的过渡结束
        flag=true;
    });
});

猜你喜欢

转载自blog.csdn.net/Chad97/article/details/83275166