Question

我不是CSS开发人员所以请耐心等待.. 这就是我想要实现的目标.. enter image description here

到目前为止，我能够创造这么多......

enter image description here

我现在很困惑如何创建墙（C）。请帮帮我。

截至目前，2d pic的代码如下。

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
#floor {
-webkit-transform: skew(148deg); 
-moz-transform: skew(148deg); 
-o-transform: skew(148deg); 
   background: none repeat scroll 0 0 #000066;
    float: left;
    height: 54px;
    left: 100px;
    position: fixed;
    top: 108px;
    width: 100px;
}
#frontwall {
    width: 100px; 
    height: 100px; 
    background: #0099FF;
    position: fixed;
    left: 117px;
}
#otherwall {
    width: 150px; 
    height: 100px; 
    -webkit-transform: rotate(-20deg) ; 
    -moz-transform: rotate(-20deg) ; 
    -o-transform: rotate(-20deg) ; 
    background: #0000CC;
    float: left;

}
</style>
</head>
<body>
<div id="otherwall"></div>
<div id="frontwall"></div>
<div id="floor"></div>

</body></html>

Answer 1

您可以单独倾斜X和Y，这可能就是您想要做的。以下works for me in Chrome。

请注意，略微较旧的浏览器（例如IE8）不能很好地支持偏斜，并且无论如何，您在浏览器上排列内容的结果可能会略有不同。

我认为supports skew正确地supports SVG,的所有内容以及很多更好的方式（坐标会更加明显）。

SVG简单：

<html>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="150px" height="125px">
        <polygon points="50,0 50,100 150,100 150,0" style="fill: #0099FF"/>
        <polygon points="0,25 50,0 50,100 0,125" style="fill: #0000CC"/>
        <polygon points="0,125 100,125 150,100 50,100" style="fill: #000066"/>
    </svg>
</body>
</html>

歪歪扭扭：

<style type="text/css">
#floor {
    -webkit-transform: skewx(-45deg);
    -moz-transform: skewx(-45deg);
    -o-transform: skewx(-45deg);
    transform: skewx(-45deg);
    background: #000066;
    height: 50px;
    left: 35px;
    position: fixed;
    top: 108px;
    width: 100px;
}
#frontwall {
    width: 100px; 
    height: 100px; 
    background: #0099FF;
    position: fixed;
    top: 8px;
    left: 60px;
}
#otherwall {
    left: 10px;
    width: 50px;
    height: 100px;
    top: 33px;
    position: fixed;
    -webkit-transform: skewy(-45deg);
    -moz-transform: skewy(-45deg);
    -o-transform: skewy(-45deg);
    transform: skewy(-45deg);
    background: #0000CC;
}
</style>
</head>
<body>
<div id="otherwall"></div>
<div id="frontwall"></div>
<div id="floor"></div>
</body></html>

在这个立方体中还需要一个墙

1 个答案: