如何在HTML中显示静态3D城市的图形？

我以前从未尝试过，我想在一个长方形上显示一个3D城市，类似这样的东西

我应该在矩形的顶部使用HTML从头开始创建这个城市吗？或者我可以在矩形的顶部添加一个3D图像吗

这是我失败的尝试

这是我的html

<div id="c" class="container">
 <div class="box r">
 <div class="side back"></div>
 <div class="side-vert left"></div>
 <div class="side-vert right"></div>
 <div class="side-hor top"></div>
 <div class="side-hor bottom"></div>
 <div class="side front">
        <img src="http://i.imgur.com/YI1zImD.jpg">
    </div>
</div>
</div>

这是JSFIDLE

---

<>你怎么认为你的尝试失败了？因为提琴的标志没有竖立在长方形的顶部？你想通过拖动来旋转城市吗？@PatrickGünther我编辑了我的提琴（抱歉让人困惑）…现在你可以看到我试图截图apple maps 3d的一部分，并将其渲染到矩形的顶部，以查看它的外观。我不认为你能用静态图像实现你想要的。我现在明白了。如果你想使用在小提琴中使用的图像，你必须从源图像中裁剪出一个合适的区域，使其略大于

div.side.front

，以便建筑物与顶部的背景重叠。如果我必须这样做，如果建筑物不必非常详细，我可能会在2D画布上动态绘制它们。有点像这样：

    $dim: 160px;
    $depth: 20px;
    $gap: 70px;

    img {
      width: 100%;
      height:100%;
    }
    .container {
      position: absolute;
      top: 100px;
      left: 100px;
      transform-style: preserve-3d;
      transform: rotateX(60deg) rotateZ(25deg);
    }

    .box {
      cursor: pointer;
      position:absolute;
      width: $dim;
      height: $dim;
      transform-style: preserve-3d;
    }
    .side {
      border: 2px solid black;
      position: absolute;
      width: $dim;
      height: $dim;
    }

    .side-vert {
      border: 2px solid black;
      position: absolute;
      width: $depth;
      height: $dim;
    }

    .side-hor {
      border: 2px solid black;
      position: absolute;
      width: $dim;
      height: $depth;
    }


    .back {
      transform: translateZ(-$depth/2);
    }
    .left {
      transform: translateX(-$depth/2) rotateY(90deg);
    }
    .right {
      transform: translateX($dim - $depth/2) rotateY(90deg);
    }
    .top {
      transform: translateY(-$depth/2) rotateX(90deg);
    }
    .bottom {
      transform: translateY($dim - $depth/2) rotateX(90deg);
    }
    .front {
      transform: translateZ($depth/2);
    }

    .r {
      transform: translateZ($gap);
    }



    .r > * {
      background-color: rgba(255,0,0,.2);
    }



    .vis > * {
      visibility: visible;
    }