用css3D做出简单旋转立方体

想要做出一个会旋转的立方体，首先第一步，将立方体的6个面画出来。

html部分：

css部分及效果图：

之后将上下左右四个面收起来，用transform:rotate（90deg）或transform:rotate（-90deg）,让左边的沿着左边那个面的右边旋转90度。主要添加了如下代码：

在之后设置当鼠标进入到wrap时，让box转动，主要添加了如下代码：

这样，立方体的旋转效果就完成了。

完整代码如下：

   

   

   

   

   

       

           

前

           

后

           

左

           

右

           

上

           

下

       

   

如果想将效果改成下图的形式：做出一个透明旋转形式该如何改呢？

首先在原代码的基础上，做如下改动：

所有代码如下：

   

   

   

   

   

       

           

前

           

后

           

左

           

右

           

上

           

下

       

   

如果觉得第一种做立方体的办法太麻烦，每个面都要旋转太麻烦，可以让每个面都沿着中心基点旋转：