首页 > 代码库 > css3实现3D动画轮播图

css3实现3D动画轮播图

2024-09-16 21:20:18   221人阅读

这个感觉有点水，只是一个很简单的css3的3D动画，不过对于不会的人来说，应该还是蛮能唬人的吧，哈。

原理很简单，老规矩，都在注释里面，可以直接复制走代码，粘贴

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .big {
            width: 560px;
            height: 300px;
            margin: 150px auto 0;
            background-color: #eee;
            position: relative;
        }
        .big ul {
            width: 100%;
            height: 100%;
            /*transform: rotateX(10deg) rotateY(10deg) rotateX(10deg);*/
            transform-style: preserve-3D;
            display: flex;
        }
        .big > span {
            position: absolute;
            width: 20px;
            height: 40px;
            background-color: rgba(0,0,0,.5);
            color: #fff;
            top: 50%;
            margin-top: -20px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        .big .left {
            left:0;
        }
        .big .right {
            right:0;
        }
        .big li {
            width: 100%;
            height: 100%;
            list-style: none;
            position: relative;
            transform-style: preserve-3D;
        }
        .big li span {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .big li span:nth-child(1) {
            background-image: url("img/1.jpg");
            transform: translateZ(150px);
        }
        .big li span:nth-child(2) {
            background-image: url("img/2.jpg");
            transform: rotateX(90deg) translateZ(150px);
        }
        .big li span:nth-child(3) {
            background-image: url("img/3.jpg");
            transform: rotateX(180deg) translateZ(150px);
        }
        .big li span:nth-child(4) {
            background-image: url("img/4.jpg");
            transform: rotateX(270deg) translateZ(150px);
        }
        .big li:nth-child(2) span {
            background-position: -112px;
        }
        .big li:nth-child(3) span {
            background-position: -224px;
        }
        .big li:nth-child(4) span {
            background-position: -336px;
        }
        .big li:nth-child(5) span {
            background-position: -448px;
        }
    </style>
    <script>
        window.onload = function() {
            //左侧按钮
            var left = document.querySelector(".left");
            //右侧按钮
            var right = document.querySelector(".right");
            //所有的li标签，其实一共只有5个
            var lis = document.querySelectorAll("li");
            var n = 0;
            //bool用来做一个开关，当有动画执行的时候，使按钮失效，待动画完毕之后，按钮才可以再次使用，才可以再次执行切换动画
            var bool = false;
//            左侧按钮绑定事件
            left.onclick = function(){
                //判断bool是否为true，是的话，说明有动画再执行，直接return，切断程序
                if (bool) {
                    return;
                }
                //把bool设为true，表示动画在执行中
                bool = true;
                //n为li沿X轴旋转的角度，下面n*90 ，表示转90度的倍数，
                n++;
                for (var i = 0;i < lis.length; i++) {
//                    让5个li标签依次旋转，按位置顺序设置延时，下面right同理
                    lis[i].style.transform = "rotateX(" + n*90 + "deg)";
                    lis[i].style.transition = "all 800ms " + i*0.1 + "s" ;
                }
            }
//            右侧按钮绑定事件
            right.onclick = function(){
                if (bool) {
                    return;
                }
                bool = true;
                n--;
                for (var i = 0;i < lis.length; i++) {
                    lis[i].style.transform = "rotateX(" + n*90 + "deg)";
                    lis[i].style.transition = "all 800ms " + i*0.1 + "s";
                }
            }
            //获取最后一个li
            var lastLi = document.querySelector("li:last-child");
            //添加监视，当最后一个li的动画执行完毕，把bool改为false，使可以再次执行程序。
            lastLi.addEventListener("webkitTransitionEnd",function(){
                bool = false;
            })
        }
    </script>
</head>
<body>
<div class="big">
    <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>
    <span class="left"><</span>
    <span class="right">></span>
</div>
</body>
</html>

 

css3实现3D动画轮播图


联系
我们