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

基本介绍

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

主编 | 王楠岚

责编 | 江南沐雪