其他
【每日一练】10—移动3D触摸滑块的实现
作者 | 杨小爱
写在前面
今天的这个小练习，是之前分享在视频号上，有小伙伴看了，说让我把源码分享一下，于是，今天我就把这个案例的源码贴出来了，需要的小伙伴自行取走。
具体效果如下：
<!doctype html><html> <head> <meta charset="utf-8"> <title>【每日一练】10—移动3D触摸滑块的实现</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> </head> <body> <div class="carousel"> <img src="mobile.png" class="mobile"> <div class="carousel-item"> <img src="img1.jpg"> </div> <div class="carousel-item"> <img src="img2.jpg"> </div> <div class="carousel-item"> <img src="img3.jpg"> </div> <div class="carousel-item"> <img src="img4.jpg"> </div> <div class="carousel-item"> <img src="img5.jpg"> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.carousel').carousel(); });</script> </body></html>*{ margin: 0; padding: 0; box-sizing: border-box;}body{ display: flex; justify-content: center; align-items: center; background: #000;}.carousel { position: relative; height: 600px; margin-top: 80px; perspective: 1500px;}.carousel .carousel-item{ width: 250px;}.carousel .carousel-item img{ max-width: 235px; transform: translateX(8px) translateY(-100px);}.carousel .carousel-item h3{ margin-top: -5px; background: #fff; color: #000; box-sizing: border-box; padding: 5px; font-weight: bold; font-size: 18px; text-align: center;}.carousel .mobile{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1000; pointer-events: none; max-width: 260px;}写在最后
如果你觉得今天的内容对你有用的话，请记得关注我们的视频号，我们也会在上面分享一些案例效果。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号