どうも！LSSです！！
CSSの立体表現を使って、3D迷路表示に挑戦してみました。
まだ改善点は多いですが^^;
3D迷路（作りかけ）
壁は適当にデザインしました。
↑こういう位置から見た感じを表現した図、です。
コード
<style>
.waku{
position:relative;
background-color:#000000;
width:300px;height:300px;
transform-style:preserve-3d;
perspective:500px;
perspective-origin:50% 47%;
overflow:hidden;
}
.waku div{
position:absolute;
width:200px;height:200px;
top:50px;left:50px;
background-image:repeating-linear-gradient(180deg,#448844 25%,#000000 30%);
}
.l1{transform-origin:0px 100px;transform:rotateY(270deg);z-index:9;}
.l2{transform-origin:0px 100px;transform:translateZ(-200px) rotateY(270deg);z-index:7;}
.l3{transform-origin:0px 100px;transform:translateZ(-400px) rotateY(270deg);z-index:5;}
.r1{transform-origin:200px 100px;transform:rotateY(90deg);z-index:9;}
.r2{transform-origin:200px 100px;transform:translateZ(-200px) rotateY(90deg);z-index:7;}
.r3{transform-origin:200px 100px;transform:translateZ(-400px) rotateY(90deg);z-index:5;}
.lf1{transform:translateX(-200px);z-index:8;}
.f1{transform:translateZ(0px);z-index:8;}
.rf1{transform:translateX(200px);z-index:8;}
.lf2{transform:translateX(-200px) translateZ(-200px);z-index:6;}
.f2{transform:translateZ(-200px);z-index:6;}
.rf2{transform:translateX(200px) translateZ(-200px);z-index:6;}
.lf3{transform:translateX(-200px) translateZ(-400px);z-index:4;}
.f3{transform:translateZ(-400px);z-index:4;}
.rf3{transform:translateX(200px) translateZ(-400px);z-index:4;}
</style>
<div class="waku">
<div class="r1"> </div>
<div class="lf1"> </div>
<div class="l2"> </div>
<div class="lf2"> </div>
<div class="r3"> </div>
<div class="rf3"> </div>
<div class="lf3"> </div>
<div class="f3"> </div>
</div>
やってる事
transform-style:preserve-3d;
perspective:500px;
とした、幅・高さ300pxの枠内に、真ん中にくるように幅・高さ200pxの「壁」を複数描いています。
側面の壁になるものはrotateYで回転、奥に位置するものはtranslateZで移動させています。
<div class="r1"> </div>
<div class="lf1"> </div>
<div class="l2"> </div>
<div class="lf2"> </div>
<div class="r3"> </div>
<div class="rf3"> </div>
<div class="lf3"> </div>
<div class="f3"> </div>
これらが一行＝一枚の壁となりますが、表示位置が書いた順によっておかしくならないよう、CSSのほうでz-indexを指定しています。
問題点
コードが煩雑すぎます^^;;;;
クラスの複数指定を使ってでも、もうちょっとマシな書き方が出来るはず…。
今後
自分で納得のいく書き方ができたら…
これと組み合わせて、遊べる迷路にしたいところですね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
