效果演示：  

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

代码目录：

HTML+CSS+JS实现 ❤️swiper倾斜图片特效❤️_前端大作业_02

主要代码实现：

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需要引入