HTML+CSS+JS实现 ❤️swiper倾斜图片特效❤️

效果演示：

代码目录：

主要代码实现：

CSS样式：

.img_swiper {width: 800px;margin: 0 auto;position: relative;
}.img {width: 100%;height: 100%;
}.img_swiper .swiper-button-prev {width: 40px;height: 40px;background-image: url(../img/prev_white.png);background-size: cover;/* left: -80px; */
}.img_swiper .swiper-button-next {width: 40px;height: 40px;background-image: url(../img/next_white.png);background-size: cover;/* right: -80px; */
}.img_swiper .swiper-button-prev.swiper-button-disabled {background-image: url(../img/prev.png);background-color: #FFFFFF;
}.img_swiper .swiper-button-next.swiper-button-disabled {background-image: url(../img/next.png);background-color: #FFFFFF;
}.img_swiper .swiper-slide {width: 440px;
}.swiper_slide_img {/* height: 440px; */perspective: 300px;-webkit-perspective: 500;/* position: absolute; */margin-left: -240px;position: relative;
}.swiper_slide_img:first-child {margin-left: 0;
}.swiper_slide_img>img {width: 360px;height: 500px;transform: rotateY(35deg) scale(0.7);transition: 1s;border-radius: 20px;cursor: url('../img/enlarge.png'), default;
}.swiper_slide_img:hover {z-index: 1000;
}.swiper_slide_img:hover img {transform: rotateY(0deg) scale(1);transition: 1s;
}.pic_container {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: #34353A;display: none;z-index: 200;overflow-y: scroll;
}.pic_container_inner {width: 25%;display: flex;align-items: center;justify-content: center;margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;
}.pic_container_inner>img {width: 100%;border-radius: 10px;cursor: url('../img/narrow.png'), default;
}

HTML代码 :

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图片轮播--可翻转、可放大缩小</title><link href="css/swiper.min.css" rel="stylesheet"><link rel="stylesheet" type="text/css" href="css/index.css" /></head><body><div class="img_swiper"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><div class="swiper_slide_img" data-url="img/img1.jpg"><img src="img/img1.jpg" class="img" alt=""></div></div><div class="swiper-slide"><div class="swiper_slide_img" data-url="img/img2.jpg"><img src="img/img2.jpg" class="img" alt=""></div></div><div class="swiper-slide"><div class="swiper_slide_img" data-url="img/img3.jpg"><img src="img/img3.jpg" class="img" alt=""></div></div><div class="swiper-slide"><div class="swiper_slide_img" data-url="img/img4.jpg"><img src="img/img4.jpg" class="img" alt=""></div></div><div class="swiper-slide"><div class="swiper_slide_img" data-url="img/img5.jpg"><img src="img/img5.jpg" class="img" alt=""></div></div></div></div><div class="swiper-button-prev one"></div><div class="swiper-button-next one"></div></div><!-- 图片放大 --><div class="pic_container"><div class="pic_container_inner"><img src="" id="box" style="transform: scale(1.5);" alt=""></div></div><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script><script src="js/index.js" type="text/javascript" charset="utf-8"></script><script src="js/imgZoom.js" type="text/javascript" charset="utf-8"></script></body></html>

上面的图片和js需要引入