huanggr
在前端，轮播都是必不可少的，那么我们如何将轮播做的好看呢，现在更新了CSS3之后，前端已经可以去制作一些3D效果了，也就可以做轮播了，接下来我们来来有哪些地方需要注意的吧!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0} body { perspective: 700px; } ul {list-style: none;} ul { width: 200px; height: 200px; margin: 100px auto; position: relative; transition: all 2s; transform-style: preserve-3d; transform: scaleX(2.5) scaleY(1.5) rotateX(0deg); } /* ul:hover { transform:scaleX(2.5) scaleY(1.5) rotateX(360deg); }*/ ul li { width: 100%; height: 100%; text-align: center; line-height: 200px; color: white; font-size:40px; position: absolute; -webkit-background-size: cover; } ul li:nth-child(1) { transform: rotateX(0deg) translateZ(100px); background: url(https://www.huanggr.cn/wp-content/themes/boke/images/s1.png) no-repeat; background-size: cover; } ul li:nth-child(2) { background: url(https://www.huanggr.cn/wp-content/themes/boke/images/s1.png) no-repeat; transform: rotateX(-90deg) translateZ(100px); background-size: cover; } ul li:nth-child(3) { background: url(https://www.huanggr.cn/wp-content/themes/boke/images/s1.png) no-repeat; transform: rotateX(-180deg) translateZ(100px); background-size: cover; } ul li:nth-child(4) { background: url(https://www.huanggr.cn/wp-content/themes/boke/images/s1.png) no-repeat; transform: rotateX(-270deg) translateZ(100px); background-size: cover; } ul li:nth-child(5) { background:rgba(255,0,255,.6); transform: rotateY(-90deg) translateZ(100px); } ul li:nth-child(6) { background:rgba(23,0,45,.6); transform: rotateY(90deg) translateZ(100px); } span { position: absolute; width: 50px; height: 50px; border-top: 3px solid #000; border-right: 3px solid #000; transform: rotate(45deg); top: 200px; left: 50%; margin-left: 100px; } .prev { transform: rotate(-135deg); margin-left: -200px; } </style> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { var num = 0; $(".next").on("click",function() { num++; $("ul").css("transform","scaleX(2.5) scaleY(1.5) rotateX("+num*90+"deg)") }) $(".prev").on("click",function() { num--; $("ul").css("transform","scaleX(2.5) scaleY(1.5) rotateX("+num*90+"deg)") }) }) </script> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <span class="next"></span><span class="prev"></span> </body> </html> |
这里我们会发现，我们使用的是css的transform和scaleX制作的效果，这些都很简单，希望大家能够掌握
7