javascript - 使用 ng-repeat 定位 3d 对象

Question

最终结果应该类似于所附图片 ( Link to illustation )。

图片的每个部分都是在 Illustrator 中绘制的单独的 png 图像，每个图像都有自己的 CSS 类。

我的问题是如何设置每个 block (png) 的位置以使它们看起来像这样。 我可以使用哪些 CSS 属性来定位它们。

我还意识到它们不能垂直居中，因为那样它们就不会出现在彼此的中间。

我之前使用 ng-repeat 来绘制圆圈(作为圆形 div)，但后来我得到的所有圆圈都只有一个维度。

有什么想法可以做到这一点以及我在做这件事时需要牢记什么？

Fiddle is here: https://jsfiddle.net/tyt4ft3g/1/

Answer 1

无论您尝试过什么，都是绝对正确的，并且是实现该目标的最佳方式。

基本上，您必须为所有 img 元素提供 position: absolute 并具有共同的 position: relative 父级。您必须使用 right 和 bottom 属性正确定位它们，以便每个图像都显示在其前任图像的中心。

此外，为顶部的图像提供更高的 z-index(即左侧较小的图像应具有比右侧图像更高的 z-index，按降序排列)。

已更新 fiddle .

引用代码以获得更好的视角:

.parent {
  width: 300px;
  height: 200px;
  position: relative;
}

.copper {
  height: 30px;
  right: 72px;
  bottom: 28px;
  position: absolute;
  z-index: 3;
  content: url(http://i.imgur.com/LeIGPou.png);
}

.ins {
  height: 60px;
  right: 37px;
  bottom: 16px;
  position: absolute;
  z-index: 2;
  content: url(http://i.imgur.com/3bMaW3t.png);
}

.power {
  height: 70px;
  right: 0;
  bottom: 16px;
  position: absolute;
  z-index: 1;
  content: url(http://i.imgur.com/jFYquAI.png);
}

<div class="parent">
  <img class="copper">
  <img class="ins">
  <img class="power">
</div>