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

css3实现3D动画轮播图

这个感觉有点水,只是一个很简单的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动画轮播图