CSS3 -- 3D轮播图-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS3 -- 3D轮播图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一：前言

今天在完善我自己的个人网站时，要做一个3D轮播图，就是一个六边体，在六边体的每个面都放一张图片，但是每个边之间都会有一定的间距，效果如下：轮播图3d旋转,css3,3d,css
点击两边的按钮会旋转切换图片，每隔4秒会自动切换。
在我初学的时候我觉得这个效果非常的有意思，很高大上，哈哈哈。今天我就把代码分享出来，以供大家使用。

二：属性讲解

要实现3D效果，我觉得需要了解一下这几个知识点。

1：tansform-style

取值：preserve-3d | flat

peserve-3d：开启3D空间，子元素可以在3D空间中进行变换
flat：关闭3D空间，子元素的变换沿着父元素的平面进行

2：transform

matrix：定义一个2D变换，使用六个值来表示矩阵变换
matrix3d：定义一个3D变换，使用16个值来表示矩阵变换
translate：定义一个2D的平移变换
translate3d：定义一个3D的平移变换
rotate：定义一个2D的旋转变换
rotate3d：定义一个3D的旋转变换
scale：定义一个2D的缩放变换
scale3d：定义一个3D的缩放变换
skew：定义一个2D的斜切变换
skewX：定义一个2D的x轴方向的斜切变换
skewY：定义一个2D的y轴方向的斜切变换

3：perspective

取值：length

length：指定观察者与元素之间的距离，单位可以是px、em、rem等

4：transform-origin

取值：x-axis y-axis z-axis

x-axis：定义元素变换的x轴方向基点，可以是长度值或百分比
y-axis：定义元素变换的y轴方向基点，可以是长度值或百分比
z-axis：定义元素变换的z轴方向基点，可以是长度值或百分比

三：代码

HTML

    <div class="outside">
        <div class="rotas">
            <div class="sel">
                <img src="./01.png">
                <div></div>
            </div>
            <div>
                <img src="./02.png">
                <div></div>
            </div>
            <div>
                <img src="./03.png">
                <div></div>
            </div>
            <div>
                <img src="./04.png">
                <div></div>
            </div>
            <div>
                <img src="./05.png">
                <div></div>
            </div>
            <div>
                <img src="./06.png">
                <div></div>
            </div>
        </div>
        <div class="changeBtns">
            <div class="left">&lt;</div>
            <div class="right">&gt;</div>
        </div>
    </div>

CSS

        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(28, 28, 28);
        }

        .outside {
            width: 80%;
            height: 85%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .rotas {
            width: 500px;
            height: 340px;
            transition: all .6s linear;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(-5deg) rotateY(2deg);
            user-select: none;
        }

        .rotas>div {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 0 10px rgb(240, 240, 240);
            transform:  scale(1.1);
        }

        .rotas>div div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 5;
            background-color: rgba(30, 30, 30, .65);
            transition: all .6s linear;
        }

        .rotas>div.sel div {
            background-color: rgba(30, 30, 30, 0);
        }

        .rotas>div:nth-of-type(1) {
            transform: translateZ(500px);
        }

        .rotas>div:nth-of-type(2) {
            transform: rotateY(-60deg) translateZ(500px);
        }

        .rotas>div:nth-of-type(3) {
            transform: rotateY(-120deg) translateZ(500px);
        }
        
        .rotas>div:nth-of-type(4) {
            transform: translateZ(-500px);
        }
        
        .rotas>div:nth-of-type(5) {
            transform: rotateY(120deg) translateZ(500px);
        }
        
        .rotas>div:nth-of-type(6) {
            transform: rotateY(60deg) translateZ(500px);
        }

        .rotas img {
            width: 100%;
            height: 100%;
        }

        .changeBtns {
            width: 100%;
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }

        .changeBtns>div {
            font-size: 20px;
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgb(170, 170, 170);
            border: solid 1px;
            cursor: pointer;
            user-select: none;
        }

Javascript

        let rotas = $('.rotas');
        let rotasPro = $('.rotas >div');
        let rightBtn = $('.right');
        let leftBtn = $('.left');
        let deg = 0;
        let degImg = 0;
        // 定义函数
        const changeRotas = (obj,n) => {
            if(n > 0) {
                deg++;
            } else {
                deg--;
            }
            obj.css('transform','rotateX(-5deg) rotateY(' + (deg*60+2) + 'deg)');
        }
        const changeImgs=(n)=> {
            if(n > 0) {
                if(++degImg >= 6) {
                    degImg = 0;
                }
            } else {
                if(--degImg < 0) {
                    degImg = 5;
                }
            }
            rotasPro.removeClass('sel');
            $(rotasPro[degImg]).addClass('sel');
        }
        rightBtn.click(function() {
            changeRotas(rotas,1);
            changeImgs(1);
        });
        leftBtn.click(function() {
            changeRotas(rotas,-1);
            changeImgs(-1);
        });
        let autoRota = setInterval(function() {
            changeRotas(rotas,-1);
            changeImgs(-1);
        }, 4000);