How can I build a 3d inside room view in css? - css

Question

There are already some nice posts on animating 3d objects in css. However I wondered whether it is possible to do so from the perspective of being inside the object.
This would be nice to build, for example, a pure css game or street view like application.

Answer 1

After some tweaking with the help of David DeSandro, this css did the trick.
#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>
Enjoy.