css - 如何在 css 中构建 3d 室内 View ？

Question

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

这对于构建纯 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>

享受吧。