JavaScript、Vue实现大数据大屏展示3D旋转动画效果

效果

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

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

开始编写

首先我们先构建一个大体的dom结构，如下:
编写基本的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;}

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

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

首先我们先获取所有需要的元素,以及设计初始值,并实现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);}

其中我们通过获取所有的子元素,然后进行计算得出每个子元素需要占用多大的弧度位置,同时我们给父级修改其中心点位,通过获取子元素上面设置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);})

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

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

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

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

JavaScript、Vue实现大数据大屏展示3D旋转动画效果相关推荐

大数据 / 大屏数据展示模板
大数据 / 大屏数据展示模板:https://gitee.com/hnustbd/DaShuJuZhiDaPingZhanShi/tree/master/
前端基础第二天项目大数据大屏可视化项目
大数据大屏可视化项目 01-项目介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出.我们引 ...
可视化大数据大屏设计
可视化大数据大屏设计一.如何做好一款大屏 1.1工具的选择帆软报表工具Finereport 1.2大屏设计通用的大屏设计原则 1.大屏指标在8-12个为宜 2.比率类.数字类和子部分布类指标要合 ...
走进贵州大数据综合试验区展示中心
以前很难把西部欠发达地区贵州与大数据联系起来.2016年中国首个国家级的大数据会议在贵阳召开,总理出席开幕式并致词,世界互联网大佬云集,贵州从昔日工业时代的跟随者猛然变成大数据时代的领跑者. 今天我到 ...
【爬虫+数据可视化毕业设计：英雄联盟数据爬取及可视化分析，python爬虫可视化/数据分析/大数据/大数据屏/数据挖掘/数据爬取，程序开发-哔哩哔哩】
[爬虫+数据可视化毕业设计:英雄联盟数据爬取及可视化分析,python爬虫可视化/数据分析/大数据/大数据屏/数据挖掘/数据爬取,程序开发-哔哩哔哩] https://b23.tv/TIoy6hj
应急资源大数据三维电子沙盘展示系统
应急资源大数据三维电子沙盘展示系统应急资源管理系统支持视频信息.应急救援物资.专业应急救援力量.社会应急救援力量.应急救援装备管理.应急重点工程避难设施.医疗卫生.运输资源.通讯保障和应急资料等业务 ...
【【数据可视化毕业设计：差旅数据可视化分析，python爬虫可视化/数据分析/大数据/大数据屏/数据挖掘/数据爬取，程序开发-哔哩哔哩】-哔哩哔哩】 https://b23.tv/iTt30QG
[[数据可视化毕业设计:差旅数据可视化分析,python爬虫可视化/数据分析/大数据/大数据屏/数据挖掘/数据爬取,程序开发-哔哩哔哩]-哔哩哔哩] https://b23.tv/iTt30QG ht ...
《大数据大创新：阿里巴巴云上数据中台之道》-读书笔记
目录 0. 前言 1. 大数据的发展历程和价值探索 1.1 大数据发展的关键事件 1.2 大数据的内涵和外延 2.阿里的大数据主张 2.1 云上数据中台赋能业务运行图 2.2 阿里数据中台赋能业务全景 ...
【读书笔记】《大数据大创新：阿里巴巴云上数据中台之道》
今天开始阅读<大数据大创新:阿里巴巴云上数据中台之道>,对数据中台的建设非常感兴趣,也是我日后的求职方向,冲鸭! 大数据发展价值数据量飞速增长从TB到PB用了20年,从PB跃升至ZB仅 ...

JavaScript、Vue实现大数据大屏展示3D旋转动画效果

效果

开始编写

JavaScript、Vue实现大数据大屏展示3D旋转动画效果相关推荐

最新文章

热门文章