效果

最近在寫一些數(shù)據(jù)大屏的時候客戶需要做個3D旋轉(zhuǎn)動效的效果，簡單整理之后寫了一個小demo做下記錄，先看一下效果：

當(dāng)點擊next的時候，整個模塊旋轉(zhuǎn)切換到下個菜單，點擊prev的時候也可以切換到上一個菜單效果。

開始編寫

1. 首先我們先構(gòu)建一個大體的dom結(jié)構(gòu)，如下:
   
2. 編寫基本的css樣式,

//設(shè)置整個模塊的大小,以及3D 元素距視圖的距離
 .carousel {
            width: 100%;
            height: 600px;
            perspective: 500px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
 .carousel figure {
            margin: 0;
            width: 420px;
            transform-style: preserve-3d;
            transition: transform 0.5s;
        }
        
        .carouselItem {
            width: 100%;
            height: 500px;
            box-sizing: border-box;
            cursor: pointer;
            -webkit-box-reflect: below 20px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .5) 100%);
        }
        
        .itemContent {
            width: 100%;
            height: 100%;
            border: 1px solid rgba(0, 180, 220, 0.5);
            box-shadow: 0 0 4vw rgba(9, 46, 148, .3) inset;
            background: linear-gradient(180deg, rgba(9, 46, 148, 0.6), rgba(9, 46, 148, 0.3), rgba(9, 46, 148, 0.3), rgba(9, 46, 148, 0.6));
            border-radius: 4px;
            font-size: 4rem;
            font-weight: bolder;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .carouselItem:not(:first-of-type) {
            position: absolute;
            left: 0;
            top: 0;
        }

3. 重點的jq部分,代碼如下:

  var figure = $("figure"),
            nav = $("nav"),
            items = $(".carouselItem"),
            n = items.length,
            theta = 2 * Math.PI / n,
            currImage = 0;
        setUpCarousel(n, items.width());

首先我們先獲取所有需要的元素,以及設(shè)計初始值,并實現(xiàn)setUpCarousel方法

function setUpCarousel(n, s) {
            var apothem = s / (2 * Math.tan(Math.PI / n));
            figure.css('transformOrigin', '50% 50% ' + -apothem + 'px');
            items.css("padding", "40px " + $(".carousel").attr("data-gap") + "px 0");
            for (var i = 1; i < n; i++) {
                items.eq(i).css({
                    'transformOrigin': '50% 50% ' + -apothem + 'px',
                    'transform': 'rotateY(' + i * theta + 'rad)',
                });
            }
            rotateCarousel(currImage);
        }

其中我們通過獲取所有的子元素,然后進行計算得出每個子元素需要占用多大的弧度位置,同時我們給父級修改其中心點位,通過獲取子元素上面設(shè)置data-gap的值設(shè)置為padding值,之后給每個子元素都設(shè)置rotateY值,之后實現(xiàn)rotateCarousel方法.以及點擊前進后退的方法,

 function rotateCarousel(index) {
            figure.css({
                "transform": "rotateX(0deg) rotateY(" + index * -theta + "rad)"
            });
        }
        $(".prev").click(() => {
            currImage--;
            rotateCarousel(currImage);
        })
        $(".next").click(() => {
            currImage++;
            rotateCarousel(currImage);
        })

我們直接修改父級的視角rotateY()即可.

下面補充自動旋轉(zhuǎn)的效果代碼:

 var xdeg = 0;
 setInterval(function() {
     xdeg = xdeg + 0.3;
     $('figure').css('transform', "rotateY(" + -xdeg + "deg)");
 }, 20);

附上全部腳本代碼,歡迎批評指正.
文章來源地址http://www.zghlxwxcb.cn/news/detail-514906.html

到了這里，關(guān)于JavaScript、Vue實現(xiàn)大數(shù)據(jù)大屏展示3D旋轉(zhuǎn)動畫效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！