CSS3 3D transforms系列教程-立方体

02-04 次

标签立方体 3d transform

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

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

<section class="container">
  <div id="cube">
    <figure class="front">1</figure>
    <figure class="back">2</figure>
    <figure class="right">3</figure>
    <figure class="left">4</figure>
    <figure class="top">5</figure>
    <figure class="bottom">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来过渡一下立方体的旋转动画。