如何在css中构建一个3d室内视图？

Question

在css中动画制作3d对象已经有一些不错的帖子了。但是我想知道是否可以从对象内部这样做。

这样可以很好地构建，例如，纯粹的CSS游戏或街景视图，如应用程序。

Answer 1

在David DeSandro的帮助下进行一些调整之后，这个css就成功了。

＆＃13;

＆＃13;

#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);
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

享受。