微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
基本介绍
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> <div> <!--小立方体--> <ul> <li><video src="video.mp4" autoplay loop muted></video></li> <li><video src="video.mp4" autoplay loop muted></video></li> <li><video src="video.mp4" autoplay loop muted></video></li> <li><video src="video.mp4" autoplay loop muted></video></li> <li><video src="video.mp4" autoplay loop muted></video></li> <li><video src="video.mp4" autoplay loop muted></video></li> </ul> </div> </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 class="cube bigCube"> <li><video src="video.mp4" autoplay loop muted></video></li> <li><video src="video.mp4" autoplay loop muted></video></li> <li><video src="video.mp4" autoplay loop muted></video></li> <li><video src="video.mp4" autoplay loop muted></video></li> <li><video src="video.mp4" autoplay loop muted></video></li> <li><video src="video.mp4" autoplay loop muted></video></li> </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）在父容器后面添加背景播放器并设置其格式。
<!--背景播放器--> <video src="video.mp4" autoplay loop muted></video> |
.bg{ width: 100%; height: 100%; object-fit: fill;/*设置背景全填充*/ } |
效果图：
图1.2 效果图
图1.3 效果图
END
主 编 | 王楠岚
责 编 | 江南沐雪
where2go 团队
微信号：算法与编程之美
长按识别二维码关注我们!
“写留言”发表评论，期待您的参与！期待您的转发！
