huanggr
妙味课堂_前端3D轮播教程
在妙味课堂学习了3D轮播之后，感觉自己茅塞顿开，所以这里出一个教程《妙味课堂_前端3D轮播教程》，来系统的讲解一下3D轮播的做法。
妙味课堂_前端3D轮播教程讲解
在前端，轮播都是必不可少的，那么我们如何将轮播做的好看呢，现在更新了CSS3之后，前端已经可以去制作一些3D效果了，妙味课堂_前端3D轮播教程，也就可以做轮播了，接下来我们来来有哪些地方需要注意的吧!
妙味课堂_前端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 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>妙味课堂_前端3D轮播教程_源码下载</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/uploads/2018/08/u15720805482276536717fm26gp0-220x150.jpg) no-repeat; background-size: cover; } ul li:nth-child(2) { background: url(https://www.huanggr.cn/wp-content/uploads/2018/08/u15720805482276536717fm26gp0-220x150.jpg) no-repeat; transform: rotateX(-90deg) translateZ(100px); background-size: cover; } ul li:nth-child(3) { background: url(https://www.huanggr.cn/wp-content/uploads/2018/08/u15720805482276536717fm26gp0-220x150.jpg) no-repeat; transform: rotateX(-180deg) translateZ(100px); background-size: cover; } ul li:nth-child(4) { background: url(https://www.huanggr.cn/wp-content/uploads/2018/08/u15720805482276536717fm26gp0-220x150.jpg) 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"> //妙味课堂_前端3D轮播教程 $(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)") }) }) //妙味课堂_前端3D轮播教程 </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> |
下载请猛戳此处：妙味课堂_前端3D轮播教程_源码下载
这里我们会发现，我们使用的是css的transform和scaleX制作的效果，国瑞前端博主希望大家可以掌握！
7