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の方が良い解決法はありますか？

私の質問の2番目の部分は、これらの翻訳の余分なスペースに関連しています。余分な幅を取り除くにはどうすればよいですか？

ありがとう：（すなわち、二つの画像のための1つのアイコンの50％は、三つの画像などのための100％）

は、ここで問題を描いた画像です！

Answer 1

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>

Answer 2

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>