炫酷的动画特效—css3旋转立方球体
想要实现旋转立方球体特效,以下的内容你不容错过。
要理解的知识点
-
形成一个3D空间: transform-style:preserve-3d (让父元素形成3D,让其子元素在3D空间进行变化 )
-
动画 animation
特点:不需要事件进行触发,调用关键帧即可
常用的写法:animation:关键帧的名称 动画运动的时间 linear(匀速) 动画延迟的时间; -
3D的旋转
transform:rotate();
rotateX()
rotateY()
rotateZ()
rotate3D()
rotate3D(x,y,z,a) [ 0不旋转,1旋转 ]
- x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
- y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
- z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
- a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。 -
制定关键帧:
@keyframes 关键帧的名称{
0%{
//开始状态
}
25%{} 50%{ } ... 100%{ //结束状态 } }
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
body{
background:#000;
}
.box{
width:400px;
height:400px;
/* 固定定位,让球体在浏览器窗口左右上下居中 */
position:fixed;
left:0;right:0;
top:0;bottom:0;
margin:auto;
/* 形成3D场景 */
transform-style: preserve-3d;
/* 倾斜一个角度,例如绕x轴旋转50度,绕y轴旋转25度 */
transform:rotateX(50deg) rotateY(25deg);
/* 调用关键帧,使球体按照每10s一圈匀速不停转动*/
animation:ulRotate 10s linear infinite;
}
.box li{
width:398px;
height:398px;
border:1px solid blue;
/* 形成一个正圆 */
border-radius: 100%;
/* 将圆以定位的形式叠加在一起 */
position:absolute;
}
/*本来所有的圆叠加在一起,我们设置rotateX分别取值20,40,60...180,所有的圆会变成绕x轴的球体 */
.rotateX1{
transform:rotateX(20deg);
}
.rotateX2{
transform:rotateX(40deg);
}
.rotateX3{
transform:rotateX(60deg);
}
.rotateX4{
transform:rotateX(80deg);
}
.rotateX5{
transform:rotateX(100deg);
}
.rotateX6{
transform:rotateX(120deg);
}
.rotateX7{
transform:rotateX(140deg);
}
.rotateX8{
transform:rotateX(160deg);
}
.rotateX9{
transform:rotateX(180deg);
}
/* 类似的,增加绕y轴的球体 */
.rotateY1{
transform:rotateY(20deg);
}
.rotateY2{
transform:rotateY(40deg);
}
.rotateY3{
transform:rotateY(60deg);
}
.rotateY4{
transform:rotateY(80deg);
}
.rotateY5{
transform:rotateY(100deg);
}
.rotateY6{
transform:rotateY(120deg);
}
.rotateY7{
transform:rotateY(140deg);
}
.rotateY8{
transform:rotateY(160deg);
}
.rotateY9{
transform:rotateY(180deg);
}
/* 制定关键帧 */
@keyframes ulRotate{
/* 开始状态 */
0%{
transform:rotateX(50deg) rotateY(25deg) rotateZ(0deg);
}
/* 结束状态 */
100%{
transform:rotateX(50deg) rotateY(25deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<ul class="box">
<li class="rotateX1"></li>
<li class="rotateX2"></li>
<li class="rotateX3"></li>
<li class="rotateX4"></li>
<li class="rotateX5"></li>
<li class="rotateX6"></li>
<li class="rotateX7"></li>
<li class="rotateX8"></li>
<li class="rotateX9"></li>
<li class="rotateY1"></li>
<li class="rotateY2"></li>
<li class="rotateY3"></li>
<li class="rotateY4"></li>
<li class="rotateY5"></li>
<li class="rotateY6"></li>
<li class="rotateY7"></li>
<li class="rotateY8"></li>
<li class="rotateY9"></li>
</ul>
</body>
</html>
效果图: