如何让3D DIV [英] how to make 3D DIV

问题描述

如何从规则矩形DIV制作3D矩形喜欢在附加的图像？

How to make from regular rectangle DIV a 3d rectangle like in the attached image?

DIV的可以是2种颜色：

The div can be 2 colors:

推荐答案

那么，你可以做这样的事情（本例中是一个立方体）：

Well, you could do something like this (this example is for a cube):

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);    
}

从：到

From: to

来源

更多关于转换

这篇关于如何让3D DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！