CSS n 번째 이미지 x 변환

포인트 아이콘을 사용하는 작은 게임을 구현하려고합니다. 이 아이콘들은 부분적으로 서로 겹쳐 져야합니다. 지금 CSS n 번째 이미지 x 변환

, 나는이 일을 오전 : 작동하지만 세련되지 못한 느낌

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

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

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

을; 바로 CSS에서 더 나은 솔루션이 있습니까?

내 질문의 두 번째 부분은 이러한 번역에서 비롯된 추가 공간과 관련이 있습니다. 어떻게하면 불필요한 너비를 없앨 수 있습니까?

감사 (즉, 두 이미지에 대해 하나 개의 아이콘 중 50 %는 3 개 개의 이미지 등 100 %)

찾는 문제를 묘사 한 이미지이다!

출처

2017-01-05 Rom1

뭔가 :

.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>

출처

2017-01-05 11:27:12 l2aelba

margin-left에는 전체 이미지 그룹에 음수 값을 사용할 수 있습니다. Zurfyx 같은

.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>

출처

2017-01-05 11:22:39 zurfyx

감사합니다! 내가 찾은 두 번째 대답을 더 간단하게 받아 들였다. – Rom1

CSS n 번째 이미지 x 변환

답변

관련 문제