Question

我正在尝试用css绘制一个长方体（如http://upload.wikimedia.org/wikipedia/commons/d/dc/Cuboid.png，但只需要3个可见的面孔）

检查了很多东西，但没有找到任何东西：S

有人可以帮忙吗？

解决。代码是：

<style>
#cubetop {
    width: 200px;
    height: 40px;
    background: green;
    -webkit-transform:    
        translateX(20px)
        skew(-45deg, 0deg);
}

#cubeface {
    width: 200px;
    height: 60px;
    background: yellow;
    display:block;
    float:left;
}

#cuberight {
    width: 40px;
    height: 60px;
    background: navy;
    display:block;
    float:left;
    -webkit-transform:    
        translateY(-20px)
        skew(0deg, -45deg);
}
</style>
<div id="cubetop"></div>
<div id="cubeface"></div>
<div id="cuberight"></div>

Answer 1

如果您对css3没问题，可以使用转换。有3个单独的div元素并对每个元素应用转换。

Mozilla中有类似的东西

-moz-transform:    rotate(15deg)
                   translateX(230px)
                   scale(1.5);

在IE中就像这样

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.4488887394336025, M12=-0.388228567653781, M21=0.388228567653781, M22=1.4488887394336025, SizingMethod='auto expand')";

或者尝试：

http://www.useragentman.com/tests/cssSandpaper/cube3.html

用CSS绘制一个长方体

1 个答案: