CSS3 制作正方體

一、預備知識

1. 變形屬性

2D變形屬性

transform:他是css3中的變形屬性:
通過transform(變形) 來實現2d 或者3d 轉換,其中2d 有，縮放 scale(x, y) ，移動 translate(x, y)，旋轉 rotate(deg),傾斜 skew(deg, deg) ,矩陣matrix() ，3D就是在2D基礎上增加了Z軸，2D屬性仍可以使用。

3D轉換屬性

• 透視（perspective）景深（900-1200 ）
  電腦顯示屏是一個2D平面，圖像之所以具有立體感（3D效果），其實只是一種視覺呈現，通過透視可以實現此目的。
  透視可以將一個2D平面，在轉換的過程當中，呈現3D效果。

• 3D呈現（transform-style),值為preserve-3d：保留3D空間(本次正方形就是利用此)
  形成一個3D空間：( 讓父元素形成3D，讓其子元素在3D空間進行變化 )

• backface-visibility：設置元素背面是否可見

二、步驟：

1、首先設置一個大盒子包裹住六個div

 <div class="box">
        <div class="con1">1</div>
        <div class="con2">2</div>
        <div class="con3">3</div>
        <div class="con4">4</div>
        <div class="con5">5</div>
        <div class="con6">6</div>
    </div>

2、 讓正方體呈現3D效果

形成一個3D空間：( 讓父元素形成3D，讓其子元素在3D空間進行變化 )

.box{
          width:300px;
          height:300px;
          position:fixed;
          left:0;right:0;
          top:0;bottom:0;
          margin:auto;
          /* 3D的空間 */
          transform-style: preserve-3d;
          /* 為了方便觀察讓3D舞台轉動角度 */
          transform:rotateX(20deg) rotateY(30deg);
          transition:2s;
      }

3、定位6個面，使其在正方形里面

   .box div{
           width:300px;
           height:300px;
           text-align: center;
           line-height:300px;
           font-size: 100px;
           font-weight:bolder;
           color:#fff;
           /* 讓6個面全部定位在父元素里面 */
           position:absolute;
           left:0;top:0;
           opacity:0.5; /* 透明 */
           border:2px solid #000;
           }

現在的效果看一下：

4、接下來就要為每個面來進行位移和旋轉

 .con1{
            /* 第一個面往前走 */
            background:red;
            transform:translateZ(150px);
        }
        .con2{
            /* 第二個面往后走 */
            background:blue;
            transform:translateZ(-150px) rotateY(180deg); /*rotateY(180deg)  讓正面朝外*/
        }
        .con3{
            /* 先往上位移150px  再繞着X軸轉動90deg */
            background:pink;
            transform:translateY(-150px) rotateX(90deg);
        }
        .con4{
            /* 先往下位移150px,再繞着X軸轉動90deg */
            background:green;
            transform:translateY(150px) rotateX(-90deg);
        }

        .con5{
            /* 先往左位移150px , 再繞着Y軸轉動90deg */
            background:rosybrown;
            transform:translateX(-150px) rotateY(-90deg);
        }
        .con6{
            /* 先往右側位移150px,再繞着Y軸轉動90deg */
            background:#000;
            transform:translateX(150px) rotateY(90deg);
        }

我們再來看下效果就出來了

下面的兩個屬性不是必須加的,為了學習必須掌握!!!

5、這里我加了給元素加backface-visibity:hidden;就可使元素背面不可見

.box div{
 /* 使背面不可見！ */
       backface-visibility:hidden;
 }

6、最后我們在將開頭提到的“景深”應用下

一般我們 都在父元素中加

.box{perspective: 1200px;}

通常的數值在900-1200之間
如果當你的視線距離物體足夠遠的時候，基本上就不會有近大遠小的感覺

對比下，既可以看到效果