图片切换 | 易学教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin:0;
        }
        .view{
            width: 560px;
            height: 300px;
            margin: 100px auto;
            position: relative;
        }
        ul{
            width: 100%;
            height: 100%;
            list-style: none;
            transform-style: preserve-3d;
        }
        ul > li{
            width: 25%;
            height: 100%;
            position: relative;
            float: left;
            transform-style: preserve-3d;
            transition: transform 0.5s;
        }
        ul>li>span
        {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        /*每个li代表同一张图片的不同位置*/
        /*每个span代表不同图片*/
        ul > li > span:nth-of-type(1) {
            background: url("../4-代码/images/q1.jpg");
            /*往z轴正方向偏移*/
            transform: translateZ(150px);
        }
        ul > li > span:nth-of-type(2){
            background: url("../4-代码/images/q2.jpg");
            transform: translateY(-150px) rotateX(90deg);
        }
        ul > li > span:nth-of-type(3){
            background: url("../4-代码/images/q3.jpg");
            transform: translateZ(-150px) rotateX(180deg);
        }
        ul > li > span:nth-of-type(4){
            background: url("../4-代码/images/q4.jpg");
            transform: translateY(150px) rotateX(-90deg);
        }
        ul > li:nth-of-type(2) > span {
            background-position: -100% 0;
        }
        ul > li:nth-of-type(3) > span {
            background-position: -200% 0;
        }
        ul > li:nth-of-type(4) > span {
            background-position: -300% 0;
        }
        ul > li:nth-of-type(5) > span {
            background-position: -400% 0;
        }
        .pre,.next{
            width: 60px;
            height: 60px;
            text-align: center;
            line-height:60px;
            position: absolute;
            top: 50%;
            text-decoration: none;
            font-size: 40px;
            transform: translate(0,-50%);
            background-color: rgba(0,0,0,0.5);
            color: #fff;
        }
        .pre{
            left: 0;
        }
        .next{
            right: 0;
        }


    </style>
</head>
<body>
<div class="view">
    <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>


    </ul>
    <a href="javascript:;" class="pre">&lt;</a>
    <a href="javascript:;" class="next">&gt;</a>
</div>
<script src="../4-代码/js/jquery.min.js"></script>

<script>
    $(function(){
        /*定义图片索引*/
        var index=0;
        /*添加节流阀  true说明本次单击会有响应处理*/
        var flag=true;
        /*下一张*/
        $(".next").on("click",function(){
            if(flag==true){
                /*设置节流阀*/
                flag=false;
                index--;
                /*所谓下一张，就是将所有li元素围绕x旋转*/
                $("li").each(function(key,value){ //0 1 2 3 4
                    /*通过添加transform样式进行旋转*/
                    $(this).css({
                        "transform":"rotateX("+(index*90)+"deg)",
                        "transition-delay":(key*0.2)+"s"
                    });
                });
                setTimeout(function(){
                    flag=true;
                },1000);
            }
        });
        /*上一张*/
        $(".pre").on("click",function(){
            if(flag==true){
                /*设置节流阀*/
                flag=false;
                index++;
                /*所谓下一张，就是将所有li元素围绕x旋转*/
                $("li").each(function(key,value){ //0 1 2 3 4
                    /*通过添加transform样式进行旋转*/
                    $(this).css({
                        "transform":"rotateX("+(index*90)+"deg)",
                        "transition-delay":(key*0.2)+"s"
                    });
                });
                setTimeout(function(){
                    flag=true;
                },1000);
            }
        });
    });
</script>

</body>
</html>
来源：CSDN
作者：weixin_43380553
链接：https://blog.csdn.net/weixin_43380553/article/details/104110563
标签
transform