学习制作3D翻转卡片是开始学习3D transform的一个好方法。一旦你掌握了3D翻转卡片的制作方法，是不是迫不及待的想制作更复杂的3D物体？我们在这个教程中将开始学习制作3D立方体。

3D立方体的HTML结构和3D卡片的HTML结构一样简单，它需要6个元素来制作立方体的6个面：

<section> <div> <figure>1</figure> <figure>2</figure> <figure>3</figure> <figure>4</figure> <figure>5</figure> <figure>6</figure> </div> </section>

给立方体的六个面设置基本的定位方式和尺寸：

.container { width: 200px; height: 200px; position: relative; perspective: 1000px; } #cube { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; } #cube figure { width: 196px; height: 196px; display: block; position: absolute; border: 2px solid black; }

在制作3D卡片的时候，我们只需要旋转它的背面，对于3D立方体，我们需要旋转6个面中的5个。面1和免 是前后两个面，面3和免4是左右两侧的面，面5和免6是上下两个main。

#cube .front { transform: rotateY( 0deg ); } #cube .back { transform: rotateX( 180deg ); } #cube .right { transform: rotateY( 90deg ); } #cube .left { transform: rotateY( -90deg ); } #cube .top { transform: rotateX( 90deg ); } #cube .bottom { transform: rotateX( -90deg ); }

我们可以移除#cube .front的声明，因为它没有效果。我们将它留在代码中是为了代码更加清晰。

现在，立方体所有的面都被旋转了，只有前面可以看得见。有4个面是和观察者垂直的，所以我们看不见它们。为了将它们放置到合适的位置，我们需要转化它们的中心位置。立方体的每一个面都是200像素宽，将中心点转化到立方体的中心需要移动一半宽度的距离：100像素。

#cube .front { transform: rotateY( 0deg ) translateZ( 100px ); } #cube .back { transform: rotateX( 180deg ) translateZ( 100px ); } #cube .right { transform: rotateY( 90deg ) translateZ( 100px ); } #cube .left { transform: rotateY( -90deg ) translateZ( 100px ); } #cube .top { transform: rotateX( 90deg ) translateZ( 100px ); } #cube .bottom { transform: rotateX( -90deg ) translateZ( 100px ); }

注意：这里translateZ的定义在rotate之后，transform 的顺序是很重要的。你需要花一些时间研究一下这些代码。每一个面开始时都按自己的中心点旋转，然后它们的中心点分别单独的倍向外转化。

现在，我们制作好了一个立方体，但是工作还没有完成。

重返Z轴平面

对于用户体验而言，当立方体的一个面到达新的位置的时候，我们的3D transforms不能将面于面之间的接口扭曲，但是当我们将元素推出Z轴平面的时候，扭曲是不可避免的。

为了保证3D transforms的平滑，Safari 浏览器将元素进行合成然后在应用transform。因此，不管是否应用了transform，文本的抗锯齿效果依然存在。然而，当在3d空间中进行transform时，文本将会被像素化。

查看文本像素化效果

回头看看Perspective的第3个DEMO，注意不管 perspective 的值多小，第一个面总是会回到它原来的位置。

要解决这个失真问题，我们可以将3D对象往回推，这样最前方的面将被定位在Z平面的后方。

#cube { transform: translateZ( -100px ); }

查看立方体效果-1

要展示立方体的所有的面，我们需要一个样式来旋转立方体，以使六个面都被展示。我们只需要在相应的面上执行相反的transform。然后就可以在#box上切换相应的class来展示相应的面。

#cube.show-front { transform: translateZ( -100px ) rotateY( 0deg ); } #cube.show-back { transform: translateZ( -100px ) rotateX( -180deg ); } #cube.show-right { transform: translateZ( -100px ) rotateY( -90deg ); } #cube.show-left { transform: translateZ( -100px ) rotateY( 90deg ); } #cube.show-top { transform: translateZ( -100px ) rotateX( -90deg ); } #cube.show-bottom { transform: translateZ( -100px ) rotateX( 90deg ); }

注意上面的代码中transform是如何执行反向操作的。先分别用translateZ转换中心点，然后再分别旋转各个面。

最后可以添加一个transition来过渡一下立方体的旋转动画。

查看立方体效果-2

相关3D立方体立方体效果：纯CSS3超酷3D旋转立方体动画特效

CSS3 3D transforms系列教程: