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

原创
09/06 00:00
阅读数 10

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


基本介绍

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旋转效果 让其绕XY轴同时旋转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 效果图




主编:王楠岚

稿件来源:深度学习与文旅应用实验室(DLETA)

本文分享自微信公众号 - 算法与编程之美(algo_coding)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部