html5 css3 3d建模视频,CSS3 3D transforms系列教程-3D长方体

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

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

1

2

3

4

5

6

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长方体也制作好了，很简单吧？^_^

查看3D长方体效果-show sides

CSS3 3D transforms系列教程：