如何製作3D DIV

Question

如何從常規矩形DIV製作一個3D矩形，如附圖所示？

股利可以2種顏色：

Answer 1

嗯，你可以做這樣的事情（本例中是一個立方體）：

HTML：

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

CSS：

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

.top{ 
    background:#09f; 
    border: 1px solid; 
    top: 0px; 
    left: 89px; 
    -webkit-transform: rotate(-45deg) skew(15deg, 15deg); 
    -moz-transform: rotate(-45deg) skew(15deg, 15deg); 
} 

.left{ 
    border: 1px solid; 
    top: 155px; 
    left: 0px; 
    background: #09f; 
    -webkit-transform: rotate(15deg) skew(15deg, 15deg); 
    -moz-transform: rotate(15deg) skew(15deg, 15deg);  
} 

.right{ 
    border: 1px solid; 
    top: 155px; 
    left: 178px; 
    background: #09f; 
    -webkit-transform: rotate(-15deg) skew(-15deg, -15deg); 
    -moz-transform: rotate(-15deg) skew(-15deg, -15deg);  
} 

來源：到

Source

More on transformations

Answer 2

在遲到和一點點重複的風險，看看這個http://www.useragentman.com/tests/cssSandpaper/cube3.html（櫃面你想支持IE呢！）。

用於IE矩陣這是實際式發電機將：http://www.useragentman.com/IETransformsTranslator/