jQuery实现3d切割轮播图

龙宝吖が

已于 2022-04-21 23:35:10 修改

阅读量1.2k

点赞数 2

文章标签： css3 前端 javascript html jquery

于 2022-04-21 23:08:39 首次发布

本文链接：https://blog.csdn.net/qq_56404203/article/details/124333908

版权

本文介绍了如何通过JavaScript动态创建HTML结构，并结合CSS3实现3D立方体的旋转效果。每个立方体由多个li元素组成，每个li包含四个span，分别代表立方体的前后上下四个面。通过控制li的旋转角度，实现了立方体的翻转动画，同时添加了延迟效果，使得动画更加平滑。此外，文章还提供了关于CSS3变换、过渡和3D效果的基础知识。

摘要由CSDN通过智能技术生成

图片加载失败
html结构,小编html结构封装到js中了，通过动态添加，来实现自己想要的效果。其中li标签有多少个，说明就切割成了多少块。每个li标签下有四个span，分别用来组成立方体的前、后、上、下四个面。注释部分帮助理解

<body>
    <div class="box">
        <ul class="images-box"></ul>
    </div>
    <input type="button" value="下一张" />
</body>
<!-- <body>
    <div class="box">
        <ul class="images-box">
            每个li由4个span组成，刚好组成正方体前、后、上、下 四个面，
            <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>
    </div>
    <input type="button" value="下一张" />
</body> -->

css样式

* {
    margin: 0;
    padding: 0;
}

.box {
    width: 880px;
    height: 550px;
    margin: 100px auto;
    /* border: 1px solid red; */
}

input {
    display: block;
    margin: auto;
}

.images-box {
    width: 100%;
    height: 100%;
    list-style: none;
    /*使被转换的子元素保留其 3D 转换*/
    transform-style: preserve-3d;
    transition: all 1s;
    /*控制旋转时间*/
}

.images-box li {
    height: 100%;
    float: left;
    position: relative;
    /*使被转换的子元素保留其 3D 转换*/
    transform-style: preserve-3d;
    transition: all 1s;
    /*控制旋转时间*/
}

.images-box li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

addLI(4);//生成的li数量，即切割的数量

function addLI(n) {
    let imagesBox = $('ul');
    let boxWidth = imagesBox.width();//获取盒子的宽度，用来计算每个li的宽度
    let liWidth = boxWidth / n;
    console.log(boxWidth);
    for (let i = 0; i < n; i++) {
        let newLI = $('<li></li>').css('width', `${liWidth}px`);
        addSpan(newLI);
        let width = liWidth * i;
        newLI.children().css('background-position', `-${width}px 0`);
        imagesBox.append(newLI);
    }
}

function addSpan(ele) {
    for (let i = 0; i < 4; i++) {
        let span = $('<span></span>');
        let deg = i * 90;
        switch (i) {
            case 0:
                span.css({
                    'background-image': 'url(img/c2.jpg)',//注意这里的路径是以html文件为准
                    transform: `rotateX(${deg}deg) translateZ(275px)`,
                });
                break;

            case 1:
                span.css({
                    'background-image': 'url(img/c3.jpg)',
                    transform: `rotateX(${deg}deg) translateZ(275px)`,
                });
                break;
            case 2:
                span.css({
                    'background-image': 'url(img/c4.jpg)',
                    transform: `rotateX(${deg}deg) translateZ(275px)`,
                });
                break;
            case 3:
                span.css({
                    'background-image': 'url(img/c6.jpg)',
                    transform: `rotateX(${deg}deg) translateZ(275px)`,
                });
                // console.log(2);
                break;
        }
        ele.append(span);
    }
}
//点击事件
$(function() {
    var index = 0; //旋转角度记录
    var flag = true;
    $('input').on('click', function() {
        if (!flag) return false;
        flag = false;
        index++;
        var angle = -index * 90;
        $('.images-box li').css('transform', 'rotateX(' + angle + 'deg)').each(function(i, item) {
            $(this).css('transition-delay', i * 0.25 + 's');//延迟效果也可以通过动态获取，即设置的总时间除切割的数量即li的个数，可自行书写
        });

    });
    //节流阀,防止连续、快速、多次点击
    $('li:last').on('transitionend', function() {
        flag = true;
    });
})

可以借助以下css借助理解小编动态添加节点时添加的css属性

* {
    margin: 0;
    padding: 0;
}

.box {
    width: 880px;
    height: 550px;
    margin: 100px auto;
    /* border: 1px solid red; */
}

input {
    display: block;
    margin: auto;
}

.images-box {
    width: 100%;
    height: 100%;
    list-style: none;
}

.images-box li {
    width: 220px;
    height: 100%;
    float: left;
    position: relative;
    /*使被转换的子元素保留其 3D 转换*/
    transform-style: preserve-3d;
    transition: all 1s;
    /*控制旋转时间*/
}

.images-box li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}


/*拼接立体容器，每个面使用不同的背景图*/


/* 用于设置每个li下的四个span的位置，让span做翻转，拼接成立方体四个面 */

.box .images-box li span:nth-child(1) {
    background-image: url("../img/c2.jpg");
    transform: translateZ(275px);
}

.box .images-box li span:nth-child(2) {
    background-image: url("../img/c3.jpg");
    transform: rotateX(90deg) translateZ(275px);
}

.box .images-box li span:nth-child(3) {
    background-image: url("../img/c4.jpg");
    transform: rotateX(180deg) translateZ(275px);
}

.box .images-box li span:nth-child(4) {
    background-image: url("../img/c6.jpg");
    transform: rotateX(-90deg) translateZ(275px);
}


/*拼接背景图*/


/* 第一个li下的四个span的背景定位不变 */

.images-box li:nth-child(1) span {
    background-position: 0 0;
}


/* 第二个li下的四个span的背景定位左移一个li的宽度，拼接成图片，以此类推（此处每个li下的四个span都对应旋转到了对应的立方体四个面的位置） */

.images-box li:nth-child(2) span {
    background-position: -220px 0;
}

.images-box li:nth-child(3) span {
    background-position: -440px 0;
}

.images-box li:nth-child(4) span {
    background-position: -660px 0;
}