CSS第n个图像x变换答案

【问题标题】：CSS nth image x transformCSS第n个图像x变换
【发布时间】：2017-05-19 21:31:38
【问题描述】：

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

现在，我正在这样做：

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

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

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

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

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

这是描述问题的图片：

谢谢！

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

谢谢！我接受了我发现更简单的第二个答案

【解决方案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>

【讨论】：