纯CSS3实现一个旋转的3D立方体盒子

简单介绍

上网易前端微专业课程，里面有一个课外作业是实现一个3D旋转立方体。花了点时间做了下。还有点意思。写个简单教程。供大家学习。

先放上终于要实现的效果

注：代码在chrome 43.0.2357.124 m正常，其它浏览器未測试

步骤

1.在二维平面上放置好各个面

大家小时候可能都玩过“叠盒子”，就是在一张纸上线画出一个盒子的展开图，然后裁剪叠出一个盒子，相似下图这样：



看到这个应该有点思路了吧，我们这里也按这个思路把立方体各个面先在平面上摆好，然后通过旋转各个面，组成立方体。

效果见

html,css,output">代码-1

上面的代码有一个地方略有不同。就是前和后是叠在一起的。这个能够这样理解。我们先把“前”这个面剪下来，放在”后“上面。最后叠盒子的时候，把”前“垂直屏幕向外移动出来，完毕拼盒子。为什么要这么做？由于这样”前“面移动比較少，写的CSS3样式更少

2.在三维空间旋转面，组成立方体盒子

最关键的一步到了，通过CSS3属性实现各个面的旋转。这里给出一个”左“面和”前“面的核心代码：

.left{
  transform: rotateY(90deg);   // 沿Y轴旋转90度
  transform-origin: right;     // 以矩形的右边框为Y轴
}
.front{
  transform: translateZ(150px);  //沿垂直屏幕往外移动150px
}

关于旋转移动的属性rotateX, rotateY, rotateZ。translateZ等，请參考张鑫旭的博文

以此类推，我们能够把各个面都旋转好，立方体盒子已经拼好了。终于效果见

html,css,output">代码-2

哦，这里另一行代码值得一提

.stage{
  perspective: 800px;     //翻译成景深或视距
}

有个网友做了一个非常好的演示样例说明perspective的概念

3.加入立方体旋转动画

静态盒子完毕之后，下一步就是加入旋转动画了，主要思路是让包含这个盒子的容器div转起来，盒子就跟着转了。以下是沿着Z轴转的一个演示样例代码

@keyframes rotate-frame{    //定义动画关键帧
  0%{
        transform: rotateZ(0deg);
    }
  100%{
        transform: rotateZ(360deg);
    }
}
.container{
    transform-style:preserve-3d;    //容器内的元素随着容器一起转
    animation: rotate-frame 3s infinite linear;    //应用关键帧动画
}

效果见代码-3

4.加点料

这样转有点傻。最后改成先沿X轴转。在沿Y轴转，主要是关键帧设置的变化。

@keyframes rotate-frame{
    0% {
        transform: rotateX(0deg);
    }
    25% {
        transform: rotateX(180deg);
    }
    50% {
        transform: rotateX(360deg) rotateY(0deg);
    }
    75% {
        transform: rotateX(360deg) rotateY(180deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}
.container{
    transform-origin: 50% 50% 75px;  //改变旋转參考的平面
}

终于效果代码-4

小结

通过这个样例能基本熟悉CSS3 transform相关的属性，做了一个小的立方体，不足之处请小伙伴们指正。

不禁脑洞再开。能不能做一个3D的魔方，相似于现实中玩的魔方那样的。实现各面的旋转，甚至自己主动解魔方，貌似挺有意义的，有时间试试~