JavaScript、Vue实现大数据大屏展示3D旋转动画效果_前端大屏3d旋转底座

效果

最近在写一些数据大屏的时候客户需要做个3D旋转动效的效果，简单整理之后写了一个小demo做下记录，先看一下效果：

当点击next的时候，整个模块旋转切换到下个菜单，点击prev的时候也可以切换到上一个菜单效果。

开始编写

1. 首先我们先构建一个大体的dom结构，如下:
   
2. 编写基本的css样式,

//设置整个模块的大小,以及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;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

3. 重点的jq部分,代码如下:

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

首先我们先获取所有需要的元素,以及设计初始值,并实现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);
        }
1
2
3
4
5
6
7
8
9
10
11
12

其中我们通过获取所有的子元素,然后进行计算得出每个子元素需要占用多大的弧度位置,同时我们给父级修改其中心点位,通过获取子元素上面设置data-gap的值设置为padding值,之后给每个子元素都设置rotateY值,之后实现rotateCarousel方法.以及点击前进后退的方法,

 function rotateCarousel(index) {
            figure.css({
                "transform": "rotateX(0deg) rotateY(" + index * -theta + "rad)"
            });
        }
        $(".prev").click(() => {
            currImage--;
            rotateCarousel(currImage);
        })
        $(".next").click(() => {
            currImage++;
            rotateCarousel(currImage);
        })
1
2
3
4
5
6
7
8
9
10
11
12
13

我们直接修改父级的视角rotateY()即可.

下面补充自动旋转的效果代码:

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

附上全部脚本代码,欢迎批评指正.