HTML5/CSS3 3D立方体旋转动画经典案例(2)-木庄网络博客

为每个面设置backgroud设置小格格的代码：

background: -webkit-linear-gradient(
           left,
           rgba(54, 226, 248, 0.5) 0px,
           rgba(54, 226, 248, 0.5) 3px,
           rgba(0, 0, 0, 0) 0px),
                   -webkit-linear-gradient(
           top,
           rgba(54, 226, 248, 0.5) 0px,
           rgba(54, 226, 248, 0.5) 3px,
           rgba(0, 0, 0, 0) 0px);
 
       -webkit-background-size: 2.5em 2.5em;

背景设置，从左到右的3像素的条条，从上到下的3像素的条条；然后设置背景大小为2.5em 2.5em ，然后将背景重复显示，效果如下（我添加了边框）：

现在的完整效果：

可以看到立方体已经成型了，最后添加上动画就行了，不要觉得动画很复杂，其实很简单~

定义一个动画帧：

@-webkit-keyframes spin
       {
           from
           {
               -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);
               transform: translateZ(-10em) rotateX(0) rotateY(0deg);
           }
 
           to
           {
               -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
               transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
           }
       }

名字为spin，开始时 translateZ(-10em) rotateX(0) rotateY(0deg); 结束时： translateZ(-10em) rotateX(360deg) rotateY(360deg); 即同时绕着x,y轴360度旋转。

最后给我们的立方体加上此animation属性：

.cube
      {
          -webkit-animation: 6s spin linear infinite;
          position: absolute;
          width: 100%;
          height: 100%;
          -webkit-transform-style: preserve-3d;
          -webkit-transform: rotateX(-20deg) rotateY(-20deg);
      }

设置时间为动画时间 6s , 动画 spin , 速度为匀速linear , 无限循环 infinite ；

关于更加细致的参数设置，可以参考w3cSchool~以后我也会写单独介绍CSS3的属性的博客~

好了，最终的效果就已经完成了~

对于原网站的样子，有点细微的差别：

因为它额外给每个面添加了一个径向渐变，那么我们添加上：

.cube *:before
    {
        display: block;
        background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%);
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%);
        content: '';
        height: 100%;
        width: 100%;
        position: absolute;
    }