cssで3D内部ルームビューを作成するにはどうすればよいですか？

Question

cssに3dオブジェクトのアニメーション化に関する素晴らしい記事があります。しかし私はオブジェクトの中にいるという観点からそうすることが可能かどうか疑問に思った。

これは、例えば、アプリケーションのような純粋なCSSゲームやストリートビューを構築するのには良いでしょう。

Answer 1

David DeSandroの助けを借りて調整した後、このCSSはトリックを行いました。

#container { 
 
    top: 100px; 
 
    width: 1200px; 
 
    height: 600px; 
 
    position: relative; 
 
    perspective: 600px; 
 
    /* half the width */ 
 
    border: 2px solid green; 
 
} 
 
#room { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    transform-origin: 50% 80% 600px; 
 
    transform-style: preserve-3d; 
 
} 
 
#room figure { 
 
    margin: 0; 
 
    display: block; 
 
    position: absolute; 
 
    border: 2px solid green; 
 
    font: 400px"calibri"; 
 
    text-align: center; 
 
} 
 
#room .n, 
 
.e, 
 
.s, 
 
.w { 
 
    width: 1196px; 
 
    height: 596px; 
 
} 
 
#room .n { 
 
    background-color: rgba(255, 0, 0, 0.3); 
 
} 
 
#room .e { 
 
    background-color: rgba(255, 255, 0, 0.3); 
 
} 
 
#room .s { 
 
    background-color: rgba(0, 255, 255, 0.3); 
 
} 
 
#room .w { 
 
    background-color: rgba(0, 0, 255, 0.3); 
 
} 
 
#room .t, 
 
.b { 
 
    width: 1196px; 
 
    height: 1196px; 
 
    top: -300px; 
 
    background-color: rgba(200, 200, 200, 0.5); 
 
} 
 
/* transform & inverse */ 
 

 
#room .n { 
 
    transform: rotateY(0deg) translateZ(0px); 
 
} 
 
#room .e { 
 
    transform: rotateY(-90deg) translateZ(-600px) translateX(600px); 
 
} 
 
#room .s { 
 
    transform: rotateY(180deg) translateZ(-1200px); 
 
} 
 
#room .w { 
 
    transform: rotateY(90deg) translateZ(-600px) translateX(-600px); 
 
} 
 
#room .t { 
 
    transform: rotateX(90deg) translateZ(300px) translateY(600px); 
 
} 
 
#room .b { 
 
    transform: rotateX(90deg) translateZ(-300px) translateY(600px); 
 
} 
 
#room .show-n { 
 
    transform: translateZ(0px) rotateY(0deg); 
 
} 
 
#room .show-e { 
 
    transform: translateX(-600px) translateZ(600px) rotateY(90deg); 
 
} 
 
#room .show-s { 
 
    transform: translateZ(1200px) rotateY(180deg); 
 
} 
 
#room .show-w { 
 
    transform: translateX(600px) translateZ(600px) rotateY(-90deg); 
 
} 
 
#room .show-t { 
 
    transform: translateY(-600px) translateZ(-300px) rotateX(-90deg); 
 
} 
 
#room .show-b { 
 
    transform: translateY(-600px) translateZ(300px) rotateX(90deg); 
 
} 
 
#room { 
 
    animation: 5s hspinner; 
 
} 
 
@keyframes hspinner { 
 
    from { 
 
    transform: rotateY(0deg); 
 
    } 
 
    to { 
 
    transform: rotateY(-360deg); 
 
    } 
 
}

<section id="container"> 
 
    <div id="room"> 
 
    <figure class="n">N</figure> 
 
    <figure class="e">O</figure> 
 
    <figure class="s">Z</figure> 
 
    <figure class="w">W</figure> 
 
    <figure class="t">T</figure> 
 
    <figure class="b">B</figure> 
 
    </div> 
 
</section>

をお楽しみください。