html - 如何制作3D DIV

如何使从普通矩形div一个三维矩形像在附加的图像？
div可以是两种颜色：

最佳答案

好吧，你可以这样做（这个例子是一个立方体）：
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