学习切换3d转2d轮播图 css3+html5+jquery_黑马轮播图css代码-CSDN博客

本文链接：https://blog.csdn.net/weixin_43245095/article/details/89036236
自己写的代码笔记

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>切割轮播图</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.view{
				width: 440px;
				height: 600px;

				margin: 150px auto;
                position: relative;

			}
			ul{
				width: 100%;
				height: 100%;
				list-style: none;
                /*可以用3d旋转查看效果*/
				/*transform: rotate3d(1,1,0,-30deg);*/
				transform-style: preserve-3d;
			}
			ul > li{
				width:20%;
				height: 100%;
				background-color: #cccccc;
				float: left;
				position: relative;
                /*保留3d过渡效果*/
				transform-style: preserve-3d;
                transition: transform 0.5s;
			}
			ul > li > span{
				width: 100%;
				height: 100%;
				position: absolute;
				background-size: cover;

				left: 0;
				top: 0;
			}
			ul > li > span:nth-of-type(1){
				background-image: url(./img/1.jpg);
                /*偏移量于view的width值有关*/
				transform: translateZ(300px) ;
			}
			ul > li > span:nth-of-type(2){
				background-image: url(./img/2.jpg);
				transform: translateY(-300px) rotateX(90deg);
			}
			ul > li > span:nth-of-type(3){
				background-image: url(./img/3.jpg);
				transform: translateZ(-300px) rotateX(180deg);
			}
			ul > li > span:nth-of-type(4){
				background-image: url(./img/4.jpg);
				transform: translateY(300px) rotateX(-90deg);
			}

			/*设置每个li元素的偏移量*/
 			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;
                transform: translate(0,-50%);
                top: 50%;
                text-decoration: none;
                font-size: 40px;
                color: aliceblue;
                font-weight: bold;
                background-color: #30543b;
                border-radius: 30px 30px;
                opacity: 0.5;

            }
            .pre{
                left: 0;
            }
            .next{
                right: 0;
            }
 		</style>
        <script src="./js/jquery-3.3.1.js"></script>
        <script>
            $(function () {
                var number=0;
                var flag = true;

                $(".next").on("click",function () {
                    if (flag == true) {
                        flag = false;
                        number++;
                        $("li").each(function (key, value) {
                            $(this).css({
                                "transform": "rotateX(" + (number * -90) + "deg)",
                                "transition-delay": (key * 0.2) + "s"
                            });
                        });
                        setTimeout(function () {
                            flag = true;
                        },1200)
                    }
                });

                $(".pre").on("click",function () {
                    if (flag == true) {
                        flag = false;
                        number--;
                        $("li").each(function (key, value) {
                            $(this).css({
                                "transform": "rotateX(" + (number * -90) + "deg)",
                                "transition-delay": (key * 0.2) + "s"
                            });
                        });
                        setTimeout(function () {
                            flag = true;
                        },1200)
                    }
                });

            });
        </script>
	</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>
			   <li>
				   <span></span>
				   <span></span>
				   <span></span>

				   <span></span>
			   </li>
		   </ul>
           <a href="#" class="pre">&lt;</a>
           <a href="#" class="next">&gt;</a>
	   </div>
	</body>