CSS3 -- 3D轮播图

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

一:前言

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

二:属性讲解

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

1:tansform-style

取值:preserve-3d | flat

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

取值:matrix | matrix3d | translate | translate3d | rotate | rotate3d | scale | scale3d | skew | skewX | skewY

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);

HTML中的图片可以换成自己的图片。

四:结语

做的不是很好,不过可以用,有空的大佬帮我指出问题我感激不尽!最后感谢大家看完,希望各位能给在下一个赞!谢谢!!!文章来源地址https://www.toymoban.com/news/detail-516925.html

到了这里,关于CSS3 -- 3D轮播图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包