3

私はCSS開発者ではないので、ご容赦ください。これが達成しようとしていることです。ここに画像の説明を入力してください

今のところ、これだけ作成できます。

ここに画像の説明を入力してください

壁の作り方がわかりません（C）。私を助けてください。

2dpicの現在のコードは次のとおりです。

<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>
4

1 に答える 1

3

X と Y を個別に傾けることができます。これは、おそらくやりたいことです。以下は Chrome で機能します。

少し古いブラウザー (IE8 など) ではスキューが十分にサポートされていないことに注意してください。

スキューを適切にサポートするものはすべて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>​
于 2012-08-19T18:23:16.137 に答える