知識(shí)點(diǎn)：

1. perspective屬性 [http://www.w3cplus.com/css3/transform-basic-property.html]
2. transform-style
3. transform-origin
4. transform
5. translate（X,Y,Z）
6. rotate（X,Y,Z）

首先把立方體的每個(gè)面布局好：
第一面和第6面是重合的。

平面圖

html模板：

<div class="wrap">
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</div>

然后通過3D變換把每一個(gè)面進(jìn)行旋轉(zhuǎn)等變換。

其中，比較重要的幾個(gè)點(diǎn)需要注意：

1. 必須在父元素中添加 perspective屬性 ，才能看出3D效果。原因請看知識(shí)點(diǎn)鏈接。
2. 必須設(shè)置-webkit-transform-style 屬性為 preserve-3d。
3. 注意每一個(gè)面旋轉(zhuǎn)的基點(diǎn)或基線。通過transform-origin屬性來設(shè)置。

最后，我們通過把立方體旋轉(zhuǎn)來查看效果。

所以，css代碼如下：

.wrap{ width: 200px; height: 200px; border: 1px solid #000; padding: 200px;
      -webkit-perspective:800px; }

.box{ width: 200px; height: 200px; position: relative;
     -webkit-transform-style: preserve-3d; transition: 3s all;
     -webkit-transform: translateZ(-100px) rotateX(0deg);}

.box div{ width: 200px; height: 200px; position: absolute; font-size: 100px; font-weight: bold;     line-height: 200px; text-align: center; color: #fff; }

.box div:nth-of-type(1){ background:red; top: -200px; left: 0;
         -webkit-transform-origin: bottom; -webkit-transform: translateZ(100px) rotateX(90deg);}

.box div:nth-of-type(2){ background: blue; top: 0; left: -200px;
        -webkit-transform-origin: right; -webkit-transform: translateZ(100px)  rotateY(-90deg);}

.box div:nth-of-type(3){ background: yellow; top: 0; left: 0;
        -webkit-transform: translateZ(100px) }

.box div:nth-of-type(4){ background: green; top: 0; left: 200px;
        -webkit-transform-origin: left; -webkit-transform: translateZ(100px)  rotateY(90deg);}

.box div:nth-of-type(5){ background: pink; top: 200px; left: 0px;
        -webkit-transform-origin: top; -webkit-transform: translateZ(100px)  rotateX(-90deg);}

.box div:nth-of-type(6){ background: #f60; top: 0; left: 0;
        -webkit-transform: translateZ(-100px) rotateX(180deg); }

.wrap:hover .box{ -webkit-transform: translateZ(-100px) rotateX(180deg); }

效果圖

不過，這樣寫是比較繁瑣的。下面是簡單一點(diǎn)的寫法，不需要將每個(gè)面的偏移都寫好。

這里只做了4個(gè)面。
css改進(jìn):

.wrap{ width: 200px; height: 200px; border: 1px solid #000; padding: 200px;
      -webkit-perspective:800px; }

.box{ width: 200px; height: 200px; position: relative;
     -webkit-transform-style: preserve-3d; transition: 3s all;
     -webkit-transform: translateZ(-100px) rotateX(0deg);}

.box div{ width: 200px; height: 200px; position: absolute; font-size: 100px; font-weight: bold;     line-height: 200px; text-align: center; color: #fff; left: 0; top: 0; }

.box div:nth-of-type(1){ background:red;-webkit-transform: translateZ(100px);}

.box div:nth-of-type(2){ background: blue; -webkit-transform-origin:top; -webkit-transform: translateZ(-100px) rotateX(90deg); }

.box div:nth-of-type(3){ background: yellow; -webkit-transform: translateZ(-100px); }

.box div:nth-of-type(4){ background: green; -webkit-transform-origin:bottom; -webkit-transform: translateZ(-100px) rotateX(-90deg); }

.wrap:hover .box{ -webkit-transform: translateZ(-100px) rotateX(180deg); }

3D立方體效果結(jié)束

不積跬步無以至千里