炫酷的动画特效—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到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；

- y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；

- z：是一个０到１之间的数值，主要用来描述元素围绕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>

效果图：