如何制作3D DIV

Question

如何从常规矩形DIV制作一个像附图中的三维矩形？

div可以是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/