炫酷的动画特效—css3旋转立方球体

炫酷的动画特效—css3旋转立方球体

想要实现旋转立方球体特效，以下的内容你不容错过。
要理解的知识点

1. 形成一个3D空间： transform-style:preserve-3d （让父元素形成3D，让其子元素在3D空间进行变化 ）

2. 动画 animation
   特点：不需要事件进行触发，调用关键帧即可
   常用的写法：animation:关键帧的名称 动画运动的时间 linear(匀速) 动画延迟的时间；

3. 3D的旋转
   transform:rotate();
   rotateX()
   rotateY()
   rotateZ()
   rotate3D()
   rotate3D(x,y,z,a) [ 0不旋转，1旋转 ]
   - x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
   - y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
   - z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
   - a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

4. 制定关键帧：
   @keyframes 关键帧的名称{
   0%{
   //开始状态
   }
   25%{

     }
        50%{
   
        }
        ...
        100%{
            //结束状态
        }
    }          
   

代码如下：

    
    
    
    


    
"box">
        
"rotateX1">
        
"rotateX2">
        
"rotateX3">
        
"rotateX4">
        
"rotateX5">
        
"rotateX6">
        
"rotateX7">
        
"rotateX8">
        
"rotateX9">

        
"rotateY1">
        
"rotateY2">
        
"rotateY3">
        
"rotateY4">
        
"rotateY5">
        
"rotateY6">
        
"rotateY7">
        
"rotateY8">
        
"rotateY9">
    

效果图：