如何制作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);    
}

从: 至

资源

更多关于转型的信息