Стеки изображений динамически в SCSS

Question

Я хотел бы создать следующий макет в SCSS:

Из-за того, что изображения имеют динамический номер, это может быть 4,5 или 2 изображенияЯ не могу жестко закодировать отрицательную вершину или свойство translateY.Поэтому мне нужен цикл foreach в SCSS, чтобы я мог назначать разные вершины этим изображениям.Можно ли создать такой макет в SCSS или мне нужно использовать JS?

Это то, что у меня есть в настоящее время, как вы можете видеть, я могу перемещать только 2-й элемент, третий уже нужен translateY(-100%)

.layers__img {
  position: relative;
  top: 0;
}
.layers__img:not(:first-child) {
  transform: translateY(-50%);
  transition: transform 0.5s ease-in;
}

<div class="layers">
            <div class="layers__img" id="layer-1">
            <img src="https://placeimg.com/640/480/any">
        </div>
            <div class="layers__img" id="layer-2">
            <img src="https://placeimg.com/640/480/any">
        </div>
            <div class="layers__img" id="layer-3">
            <img src="https://placeimg.com/640/480/any">
        </div>
    </div>

Answer 1

Попробуйте это ниже:

let layers = $('.layers__img');
$.each( layers, function( key, value ) {
  var percent = 50;
  if(key != 0) {
    $('img',value).css('transform', 'translateY(-'+percent * key+'%)');
  }
});

.layers__img {
  position: relative;
  top: 0;
}
.layers__img:not(:first-child) {
  transition: transform 0.5s ease-in;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="layers">
        <div class="layers__img" id="layer-1">
            <img src="https://placeimg.com/640/480/any" width="100px">
        </div>
        <div class="layers__img" id="layer-2">
            <img src="https://placeimg.com/640/480/any"  width="100px">
        </div>
        <div class="layers__img" id="layer-3">
            <img src="https://placeimg.com/640/480/any"  width="100px">
        </div>
        <div class="layers__img" id="layer-3">
            <img src="https://placeimg.com/640/480/any"  width="100px">
        </div>
        <div class="layers__img" id="layer-3">
            <img src="https://placeimg.com/640/480/any"  width="100px">
        </div>
 </div>