前端|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
主 编 | 王楠岚
责 编 | 江南沐雪
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-07-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读