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

02-05 次

标签立方体 3d transform

上一个课程我们学习了3D立方体的制作，制作3D立方体还是比较简单的，它只需要关注一个测量值。现在，让我们来想一想如何制作不规则的立方体-长方体。我们打算制作一个长方体：长300像素，宽200像素，高100像素。

3D长方体的HTML结构代码和3D立方体的一样，我们修改#cube为#box：

<section class="container">
  <div id="box">
    <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>

3D长方体的通用样式也和立方体的一样：

.container {
  width: 200px;
  height: 200px;
  position: relative;
  perspective: 1000px;
}

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

现在，我们需要定位每一个面。长方体的面可以分为3组，每一组都有各自的样式。上下左右4个面需要定位在容器的中心，以便于旋转和外移。左右两个面定位在left: 100px（(300 - 100) / 2），上下两个面定位在top: 50px（(200 - 100) / 2）。关于这两个定位可以看下3D长方体效果-steps的No Transforms例子。

#box figure {
  display: block;
  position: absolute;
  border: 2px solid black;
}

#box .front,
#box .back {
  width: 296px;
  height: 196px;
}

#box .right,
#box .left {
  width: 96px;
  height: 196px;
  left: 100px;
}

#box .top,
#box .bottom {
  width: 296px;
  height: 96px;
  top: 50px;
}

然后要对六个面进行旋转和中心转换。transform的方法和3D立方体的一样，但要注意这是长方体，translate的值是不同的。因为#box的高度是100像素，所以前后两个面要外移50像素。同理，左右两个面要translate 150像素。上下两个面要translate 100像素。

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

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

查看3D长方体效果-steps

和3D立方体一样，为了将所有的面都展示出来，需要一个transform顺序相反的样式。translateZ和rotate的值都是原值的取反值。

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

到这里，3D长方体也制作好了，很简单吧？^_^