1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 div,ul,li,span{
8 margin: 0;
9 padding: 0;
10 }
11 .view{
12 width: 1920px;
13 height: 1080px;
14 margin: 100px auto;
15 position: relative;
16 }
17 ul{
18 width: 100%;
19 height: 100%;
20 list-style: none;
21 /*transform: rotate3d(1,1,0,-30deg);*/
22 transform-style: preserve-3d;
23 }
24 ul >li{
25 width: 20%;
26 height: 100%;
27 float: left;
28 position: relative;
29 transform-style: preserve-3d;
30 /*添加过度效果*/
31 transition: transform 0.5s;
32
33 }
34 ul > li > span{
35 width: 100%;
36 height: 100%;
37 position: absolute;
38 left: 0;
39 top: 0;
40 }
41 /*其实就是一个立方体的四个面，来转换*/
42 ul > li > span:nth-of-type(1){
43 background: url("../img/lunbo1.jpg");
44 transform: translateZ(540px);
45 }
46 ul > li > span:nth-of-type(2){
47 background: url("../img/lunbo2.jpg");
48 transform: translateY(-540px) rotateX(90deg);
49 }
50 ul > li > span:nth-of-type(3){
51 background: url("../img/lunbo3.jpg");
52 transform: translateZ(-540px) rotateX(180deg);
53 }
54 ul > li > span:nth-of-type(4){
55 background: url("../img/lunbo4.jpg");
56 transform: translateY(540px) rotateX(-90deg);
57 }
58
59 /*设置每一个li元素的span所显示的图片的·位置.每一个往自己地左边偏移相应的位置，不然会都显示第一个li的图片*/
60 ul> li:nth-of-type(2) > span {
61 background-position: -100% 0;
62 }
63 ul> li:nth-of-type(3) > span {
64 background-position: -200% 0;
65 }
66 ul> li:nth-of-type(4) > span {
67 background-position: -300% 0;
68 }
69 ul> li:nth-of-type(5) > span {
70 background-position: -400% 0;
71 }
72
73 .pre,.next{
74 width: 200px;
75 height: 200px;
76 text-align: center;
77 line-height: 200px;
78 position: absolute;
79 top: 50%;
80 text-decoration: none;
81 font-size: 170px;
82 transform: translate(0,-50%);
83 background-color: rgba(0,0,0,0.5);
84 color: #fff;
85 }
86 .pre{
87 left: 0;
88 }
89 .next{
90 right: 0;
91 }
92 </style>
93 </head>
94 <body>
95 <div class="view">
96 <ul>
97 <!--每一个li就是一个结构快-->
98 <li>
99 <!--每一个span就是结构快的某一面，用来显示图片-->
100 <span></span>
101 <span></span>
102 <span></span>
103 <span></span>
104 </li>
105 <li>
106 <span></span>
107 <span></span>
108 <span></span>
109 <span></span>
110 </li>
111 <li>
112 <span></span>
113 <span></span>
114 <span></span>
115 <span></span>
116 </li>
117 <li>
118 <span></span>
119 <span></span>
120 <span></span>
121 <span></span>
122 </li>
123 <li>
124 <span></span>
125 <span></span>
126 <span></span>
127 <span></span>
128 <span></span>
129 </li>
130 </ul>
131 <a href="javascript:;" class="pre"><</a>
132 <a href="javascript:;" class="next">></a>
133 </div>
134 <script src="../js/jquery-3.4.1.js"></script>
135 <script>
136 $(function () {
137 /*定义一个图片的索引*/
138 var index=0;
139 /*添加节流阀 true说明本次单击会相应处理*/
140 var flag = true;
141 /*下一张*/
142 $(".next").on("click",function () {
143 if (flag==true){
144 flag=false;
145 index--;
146 /*所谓下一张，就是将所有li元素围绕x旋转*/
147 $("li").each(function (key,value) {
148 /*通过添加transform样式进行旋转*/
149 $(this).css({
150 "transform":"rotateX("+(index*90)+"deg)",
151 "transition-delay":(key*0.2)+"s"
152 });
153 });
154
155 setTimeout(function () {
156 flag=true;
157 },1000);
158 };
159
160 });
161 /*上一张*/
162 $(".pre").on("click",function () {
163 if (flag==true){
164 flag=false;
165 index++;
166 /*所谓下一张，就是将所有li元素围绕x旋转*/
167 $("li").each(function (key,value) {
168 /*通过添加transform样式进行旋转*/
169 $(this).css({
170 "transform":"rotateX("+(index*90)+"deg)",
171 "transition-delay":(key*0.2)+"s"
172 });
173 });
174
175 setTimeout(function () {
176 flag=true;
177 },1000);
178 };
179
180 });
181 });
182 </script>
183 </body>
184 </html>
