顛覆網路 35 天 (8a): CSS 3D 效果

這篇有一個用 Firefox 3.5 新增之 -moz-transform 所製作出來的範例，非常有趣 (強烈建議要看啦)，一例勝千文，看了再說：

View the Demo in Firefox 3.5

當然，-moz-transform 目前還是個 2D 效果的玩意，製作出來的「3D」也是可稱為 2.5D 的視覺效果而已。目前要做到真正的 3D，用這個特性還辦不到。

來看程式碼：首先以 DIV 標籤圍出立方體的三個顯示面：

<div class="cube">
    <div class="face top">
    </div>
    <div class="face left">
    </div>
    <div class="face right">
    </div>
</div>

.cube {
    position: absolute;
}
 
.face {
    position: absolute;
    width: 200px;
    height: 200px;
}

接著把這 3 個 div 都轉為平行四邊形：

.top {
    -moz-transform: rotate(-45deg) skew(15deg, 15deg);
}
 
.left {
    -moz-transform: rotate(15deg) skew(15deg, 15deg);
}
 
.right {
    -moz-transform: rotate(-15deg) skew(-15deg, -15deg);
}

至此，三個方塊已經以平行四邊形的樣子排成正六芒星，接著我們只要調整位置即可。你可以用方程式算出三個面所應該排列的座標點，或者慢慢一步步調整到正確的地方也行。下方的陰影其實就是 top 那一面的位移複製品，只是設定了 opacity: 0.5 的背景色。另一個方塊也是把樣式與標籤直接再複製一份做出來的，並以 translate(600px, 400px) 位移、以 scale(0.5) 將尺寸縮小 50%

方塊中間要填入什麼都行，其中有一面以 HTML5 Video 標籤放入了影片，你可以看到影片也被調整成平行四邊形的樣子 :P

除了 Firefox 3.5 之外，Safari 3.1+ 與 Google Chrome 亦以 -webkit-transform 的型態支援。相關文件可參考 https://developer.mozilla.org/En/CSS/CSS_transform_functions