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