CSS3打造3D立方体

前言：今天用css3实现正方体。经过此案例，能够对css3在实现3D效果方面的属性有必定了解。

案例效果

HTML分析

最外层的.container触发3d效果，#cube保留父元素的3d空间同时包裹正方体的6个面，给每一个面设置对应的class属性。
HTML代码以下：

<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>

CSS分析

1. 外观

给立方体的每一个面设置不一样的颜色，而且对字体进行设置。
代码以下：

#cube figure{
        font-size: 120px;
        line-height: 196px;
        font-weight: bold;
        color: white;
        text-align: center;
    }
    .front  { background: hsla(   0, 100%, 50%, 0.5 ); }
    .back   { background: hsla(  60, 100%, 50%, 0.5 ); }
    .right  { background: hsla( 120, 100%, 50%, 0.5 ); }
    .left   { background: hsla( 180, 100%, 50%, 0.5 ); }
    .top    { background: hsla( 240, 100%, 50%, 0.5 ); }
    .bottom { background: hsla( 300, 100%, 50%, 0.5 ); }

2. 定位

#cube及其包裹的子元素figure相对最外层.container绝对定位，.figure给2px的边框。
代码以下：

.container{
        width: 200px;
        height: 200px;
        position: relative;
    }
    #cube{
        width: 100%;/*让#cube与.container的transform-origin同样*/
        height: 100%;
        position: absolute;
    }
    #cube figure{
        width: 196px;
        height: 196px;
        border:2px solid black;
        position: absolute;
    }

3. 3D效果

首先，在脑海里要有一个3D坐标系

通俗的说，Z轴就是垂直于电脑屏幕的轴，正方向指向正在电脑面前的你，X轴就是左右，Y轴就是上下。
（1） 相关属性简介：

• transform相关函数：

  • rotate：围绕某个轴进行旋转，如rotateY(30deg)就是围绕Y轴旋转30度。正值为顺时针旋转，负值逆时针。

  • translate:在某个轴上的位移。translateZ(10px)就是在Z轴的正方向上位移10px，也就是说在原始坐标下，元素朝你位移了10px，和你接近了10px.

• 3D属性

  • perspective:创造3D空间，值越小，元素的纵深越大，3D效果越明显。需设置在父元素。

  • transform-style：有flat和preserve-3d两个值。flat为2D平面，preserve-3d为保留父元素创造的3D空间。flat为默认值。

须要详细了解能够参看:
mdn
w3cplus

固然，最好的办法仍是本身一个个属性的尝试。最好用在线编辑器能够实时查看效果。好比jsbin

(2) 效果分析
首先，咱们要创造3D空间，让子元素使用父元素创造的3D空间。

.container{perspective:1000px;}
#cube{transform-style:preserve-3d;}

在创造3D空间后，根据上面你已了解的transform相关函数效果，咱们对右面进行一个重点分析，其余面也可采用相同的思想建立。

对于右面，首先绕Y轴旋转90度，这时右面应该是垂直居中于正面.front的。接下来，咱们应该让.right右移.front一半的距离，即100px。

请注意：
若是这时候你写的是translateX(100px)的话，你会发现右面是向里面移动的。这是由于：旋转后坐标系会跟着旋转，也就是说，.right绕Y轴旋转90度后，坐标轴也随着转了90度，此时.right的Z轴已经跟着转到了咱们的“右边”去了（不知道这样描述会不会懂...）。

所以，咱们应该使用translateZ(100px)实现.right向“右”移动100px.
因为坐标轴会跟着元素旋转，因此咱们在书写时必定要注意transform function的书写顺序。你能够先translateZ(100px)再rotateY(90deg)看看效果同样不。

同理，对于其余几面能够根据这个思路来分析。
代码以下：

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

这样，咱们用CSS3打造的立方体就实现了。

4. 过渡效果

咱们让鼠标hover#cube时，figure再进行3D的变化。

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

最后，咱们让这个变换有一个过渡的效果
#cube figure{transition:all 1s;}
OK.这样，咱们的效果就实现啦！

长方体的实现

在实现长方体的时候，咱们要注意不一样面的宽高、位移不同。
HTML代码以下：

<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>

CSS代码以下：

*{margin:0;}
    .container{
      width:300px;
      height:200px;
      position:relative;
      perspective:1000px;
      margin:50px auto;
    }
    #box{
      width:100%;
      height:100%;
      position:absolute;
      transform-style:preserve-3d;
      transition:all 1.5s;
    }
    #box figure{
      position:absolute;
      font-size:120px;
      font-weight:bold;
      color:white;
      line-height:196px;
      text-align:center;
      border:2px solid black;
      transition:all 1s;
    }
    .front,.back{width:296px;height:196px;}
    .right,.left{width:96px;height:196px;left:100px;}
    .top,.bottom{width:296px;height:96px;top:50px;}
    
     .front  { background: hsla(   0, 100%, 50%, 0.5 ); }
     .back   { background: hsla(  60, 100%, 50%, 0.5 ); }
     .right  { background: hsla( 120, 100%, 50%, 0.5 ); }
     .left   { background: hsla( 180, 100%, 50%, 0.5 ); }
     .top    { background: hsla( 240, 100%, 50%, 0.5 ); }
     .bottom { background: hsla( 300, 100%, 50%, 0.5 ); }
    
    #box:hover .front{transform:rotateY(0deg) translateZ(50px);}
    #box:hover .back{transform:rotateY(180deg) translateZ(50px);}
    #box:hover .right{transform:rotateY(90deg)translateZ(150px);}
    #box:hover .left{transform:rotateY(-90deg) translateZ(150px);}
    #box:hover .top{transform:rotateX(90deg) translateZ(100px);}
    #box:hover .bottom{transform:rotateX(-90deg) translateZ(100px);}
    #box:hover{transform:translateZ(200px);}

总结

其实实现这个，收获最大的就是知道了坐标轴会改变，坐标轴会改变，坐标轴会改变，以及transform的几个函数的效果。所以，必定要注意transform函数的书写顺序。

参考资料

mdn
w3cplus
Intro to CSS 3D transforms