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>