CSS nth image x transform

Question

我正在尝试实现一个小游戏，我使用点图标。这些图标应该部分叠加在一起。

现在，我这样做：

.wormicon:nth-child(2) {
  transform: translateX(-50%);
}

.wormicon:nth-child(3) {
  transform: translateX(-100%);
}

.wormicon:nth-child(4) {
  transform: translateX(-150%);
}

有效，但感觉不雅;直接CSS有更好的解决方案吗？

我的问题的第二部分与这些翻译的额外空间有关：如何摆脱无关的宽度？ （即两个图像的一个图标的50％，三个图像的100％等）。

以下是描述问题的图片：

谢谢！

Answer 1

您可以在整个图像组中使用带有负值的margin-left。

.container > img {
  margin-left: -10px;
}

.container {
  padding-left: 50px;
}

img {
  position: relative;
  margin-left: -50px;
}

<div class="container">
  <img src="https://image.freepik.com/free-icon/new-york-apple-symbol_318-68820.jpg">
  <img src="https://image.freepik.com/free-icon/new-york-apple-symbol_318-68820.jpg">
  <img src="https://image.freepik.com/free-icon/new-york-apple-symbol_318-68820.jpg">
  <img src="https://image.freepik.com/free-icon/new-york-apple-symbol_318-68820.jpg">
  </div>

Answer 2

像Zurfyx这样的东西：

.wormicon {
  margin-left: -20px;
}
.wormicon:first-of-type {
  margin-left: 0;
}

<div>
  <div class="what_ever_element_here">
  <img class="wormicon" src="http://www.irrawaddy.com/wp-content/themes/irrawaddy-skin/images/icon/loved.svg">
  <img class="wormicon" src="http://www.irrawaddy.com/wp-content/themes/irrawaddy-skin/images/icon/loved.svg">
  <img class="wormicon" src="http://www.irrawaddy.com/wp-content/themes/irrawaddy-skin/images/icon/loved.svg">
  <img class="wormicon" src="http://www.irrawaddy.com/wp-content/themes/irrawaddy-skin/images/icon/loved.svg">
  <div class="what_ever_element_here">
</div>