当前位置主页 > 资料库 > 前端教程 > CSS3 3D transforms系列教程-立方体

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

2015-02-04

学习制作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 ); }                              
                            

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

重返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系列教程:

  1. Perspective
  2. 3D transform 属性
  3. 卡片翻转
Previous:
上一篇:CSS3 3D transforms系列教程-卡片翻转
Next:
下一篇:CSS3 3D transforms系列教程-3D长方体
返回顶部