效果
最近在写一些数据大屏的时候客户需要做个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()即可.
下面补充自动旋转的效果代码:文章来源：https://www.toymoban.com/news/detail-514906.html
var xdeg = 0;
setInterval(function() {
xdeg = xdeg + 0.3;
$('figure').css('transform', "rotateY(" + -xdeg + "deg)");
}, 20);
附上全部脚本代码,欢迎批评指正.
文章来源地址https://www.toymoban.com/news/detail-514906.html
到了这里，关于JavaScript、Vue实现大数据大屏展示3D旋转动画效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
