3D切割轮播图

最新推荐文章于 2023-05-14 15:53:13 发布

东北玛丽的小笔记

最新推荐文章于 2023-05-14 15:53:13 发布

阅读量96

点赞数

分类专栏：案例

本文链接：https://blog.csdn.net/weixin_44614856/article/details/88390286

版权

案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">
    <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>
        <li><span></span><span></span><span></span><span></span></li>
    </ul>
    <style>
        .box {
            width: 560px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #ccc;
            position: relative;
        }

        .box a {
            width: 40px;
            height: 60px;
            background: rgba(0, 0, 0, 0.4);
            color: white;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
            position: absolute;
            top: 120px;
            text-decoration: none;
        }

        .box .prev {
            left: 0;
        }

        .box .next {
            right: 0;
        }

        .box ul {
            list-style: none;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        .box ul li {
            width: 112px;
            height: 300px;
            float: left;
            position: relative;

            /*真正意义3D呈现*/
            transform-style: preserve-3d;
        }

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

        .box ul li span:nth-child(1) {
            background: url("../04-code/images/02-3d-transform/images/1.jpg") no-repeat;
            /*正面*/
            transform: translateZ(150px);
        }

        .box ul li span:nth-child(2) {
            background: url("../../../Desktop/h5c3/C3day02/04-code/02-3d-transform/images/2.jpg") no-repeat;
            /*上面*/
            transform: translateY(-150px) rotateX(90deg);
        }

        .box ul li span:nth-child(3) {
            background: url("../../../Desktop/h5c3/C3day02/04-code/02-3d-transform/images/3.jpg") no-repeat;
            /*背面*/
            transform: translateZ(-150px) rotateX(180deg);
        }

        .box ul li span:nth-child(4) {
            background: url("../../../Desktop/h5c3/C3day02/04-code/02-3d-transform/images/4.jpg") no-repeat;
            /*下面*/
            transform: translateY(150px) rotateX(270deg);
        }

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

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

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

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

        .box ul li:nth-child(5) span {
            background-position: -448px 0;
        }
    </style>
    <a href="javascript:;" class="prev">&lt;</a>
    <a href="javascript:;" class="next">&gt;</a>
</div>
<script src="../../../Desktop/h5c3/C3day02/04-code/02-3d-transform/jquery.min.js"></script>
<script>
    $(function () {
        /*1. 点击prev 切换上一张*/
        /*2. 点击next 切换下一张*/
        /*开关*/
        var flag = true;
        /*轮播图*/
        var index = 0;
        /*核心点  索引  计算  需要旋转的角度 */
        $('.prev').on('click',function () {
            /*根据开关去限制按钮是否可以点击*/
            if(!flag) return;
            flag = false;

            /*上一张*/
            index --;
            /*怎么根据index计算角度*/
            var angle = - index * 90 + 'deg';
            /*动画的旋转*/
            $('li').css({'transition':'all 1s','transform':'rotateX('+angle+')'}).each(function (i, item) {
                $(item).css({'transition-delay':i*0.25+'s'});
            });
        });
        $('.next').on('click',function () {
            /*根据开关去限制按钮是否可以点击*/
            if(!flag) return;
            flag = false;

            /*下一张*/
            index ++;
            /*怎么根据index计算角度*/
            var angle = - index * 90 + 'deg';
            /*动画的旋转*/
            $('li').css({'transition':'all 1s','transform':'rotateX('+angle+')'}).each(function (i, item) {
                $(item).css({'transition-delay':i*0.25+'s'});
            });
        });
        /*处理：
         当动画正在执行  不能执行下一次动画（让点击无效）
         当动画执行完毕  开启你执行动画的功能*/
        /*当动画结束 flag = true ;*/
        /*具体：监听到最后一个LI元素的过渡结束*/
        $('li:last-child').on('transitionend',function () {
            console.log('ok');
            flag = true;
        });
    });
</script>
</body>
</html>

东北玛丽的小笔记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3D切割轮播图

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div class
复制链接

扫一扫