代码探险家

这个屌丝很懒，什么也没留下！

热门标签

前端|3D立体视频翻转动画

作者：代码探险家 | 2024-07-16 14:23:55

踩

前端鼠标移入立方体翻转

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

欢迎加入团队圈子！与作者面对面！直接点击！

基本介绍

HTML5 3D立方体翻转动画特效是一款基于TweenMax制作多张图片拼接的3D立方体正方形旋转动画特效。

图1.1 效果图

思路分析

制作3D立体视频翻转动画网页时，主要用到以下方法：

1、使用animation: rotate linear ns infinite属性来设置动画播放样式：动画对象，播放速度，时间，播放次数。

2、使用transform属性向元素应用2D或者3D转换。transform:rotateX() rotateY() rotateZ()让我们能够对元素进行翻转; ransform: scaleX()通过设置X轴的值来定义缩放转换。

3、添加鼠标移上效果hover。

制作过程

（1）创建一个父容器和立方体容器。在立方体容器里面创建小立方体，并插入视频，让视频自动播放（autoplay：自动播放；loop：循环播放；muted：静音）。

<div>

<ul>

</ul>

</div>

（2）调整视频大小，将视频整体居中，调整视距为800。

margin: 0;

padding: 0;

}

li{

list-style: none;/*去除list前面的修饰*/

}html,body{

width: 100%;

height: 100%;

overflow: hidden;

}

.main{

width: 100%;

height: 100%;

perspective: 800;/*调整视距大小*/

}

.cubeBox{ /*整体立方体*/

width: 200px;

height: 200px;

position: absolute;

top: 50%;

left: 50%;

margin: -100px 0 0 -100px;

transform-style: preserve-3d;/*调整方位居中；变化类型为3D*/

}

.cube{

width: 100px;

height: 100px;

position: absolute;

top: 50%;

left: 50%;

margin: -50px 0 0 -50px;

transform-style: preserve-3d;/*调整方位居中；变化类型为3D*/

transform: rotateX(-10deg)rotateY(45deg);

animation: move 4s linear infinite;/*复合方式设置动画：动画名执行一次时间执行方式使动画永远的执行下去*/

}

（3）修饰小方块的六个面和它的视频大小位置。

.cube li{

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

transition: all 1s ease;/*设置动画过渡：全部样式 1秒缓动*/

}

.cube li video{

width: 100%;

height: 100%;

}

.cube li:nth-child(1){

transform: rotateX(0deg)translateZ(50px);

}

.cube li:nth-child(2){

transform: rotateX(180deg)translateZ(50px);

}

.cube li:nth-child(3){

transform: rotateX(-90deg)translateZ(50px);

}

.cube li:nth-child(4){

transform: rotateX(90deg)translateZ(50px);

}

.cube li:nth-child(5){

transform: rotateY(-90deg)translateZ(50px);

}

.cube li:nth-child(6){

transform: rotateY(90deg)translateZ(50px);

}

（4）设置外面的大立方体以及对应的效果。

</ul>

/*大立方体*/

.bigCube{

width: 200px;

height: 200px;

margin: -100px 0 0 -100px;

}

.bigCube li:nth-child(1){

transform: rotateX(0deg)translateZ(100px);

}

.bigCube li:nth-child(2){

transform: rotateX(180deg)translateZ(100px);

}

.bigCube li:nth-child(3){

transform: rotateX(-90deg)translateZ(100px);

}

.bigCube li:nth-child(4){

transform: rotateX(90deg)translateZ(100px);

}

.bigCube li:nth-child(5){

transform: rotateY(-90deg)translateZ(100px);

}

.bigCube li:nth-child(6){

transform: rotateY(90deg)translateZ(100px);

}

（5）调用动画名字，设置动画旋转效果（@keyframe效果:实现动画效果；使用方法:@keyframe 后+动画名{from:初始状态;to:末状态}）。

@keyframes move{

from{transform: rotateX(-13deg) rotateY(0deg);}

to{transform: rotateX(-13deg) rotateY(360deg);}/*添加3D旋转效果让其绕X、Y轴同时旋转90度*/

}

（6）为立方体添加鼠标移上的效果。

.cubeBox:hover .bigCube li:nth-child(1){

transform: rotateX(0deg)translateZ(200px);

}

.cubeBox:hover .bigCube li:nth-child(2){

transform: rotateX(180deg)translateZ(200px);

}

.cubeBox:hover .bigCube li:nth-child(3){

transform: rotateX(-90deg)translateZ(200px);

}

.cubeBox:hover .bigCube li:nth-child(4){

transform: rotateX(90deg)translateZ(200px);

}

.cubeBox:hover .bigCube li:nth-child(5){

transform: rotateY(-90deg)translateZ(200px);

}

.cubeBox:hover .bigCube li:nth-child(6){

transform: rotateY(90deg)translateZ(200px);

}

（7）在父容器后面添加背景播放器并设置其格式。

.bg{

width: 100%;

height: 100%;

object-fit: fill;/*设置背景全填充*/

}

效果图：

图1.2 效果图

图1.3 效果图

END

主编 | 王楠岚

责编 | 江南沐雪

where2go 团队

微信号：算法与编程之美

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/834635