Loop through HTML elements in CSS and apply style - css

Question

I have 4 cards (extendible to N cards) in a stack that I want to show in a stacked effect using HTML and CSS.
Desired Output:
I have the following code so far, but need some help tweaking the CSS to show the stacked effect for all 4 cards instead of 2 cards.
body {
background-color: #e8eaed;
}
.stack {
width: 500px;
height: 500px;
position: absolute;
}
.card {
width: 80%;
min-height: 40%;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
justify-content: center;
align-items: center;
border-radius: 5px;
font-family: sans-serif;
font-size: 10rem;
color: #00000080;
box-shadow: 0 5px 15px 0 #00000040, 0 5px 5px 0#00000020;
transition: transform 200ms;
}
.card:nth-last-child(1) {
--y: calc(-50% + 15px);
transform: translate(-50%, var(--y)) scale(1.05);
}
<div class="stack">
<div class="card" style="--i:1">1</div>
<div class="card" style="--i:2">2</div>
<div class="card" style="--i:3">3</div>
<div class="card" style="--i:4">4</div>
</div>

Answer 1

You are using the CSS Custom Property --y in your styles and the custom property --i in your markup.
I've made some edits to your styles, to demonstrate how you can achieve the effect you describe.
Working Example:
body {
background-color: #e8eaed;
}
.stack {
width: 500px;
height: 500px;
position: absolute;
}
.card {
width: 80%;
min-height: 40%;
background-color: white;
position: absolute;
top: 100px;
left: 100px;
transform: translate(-50%, -50%);
display: grid;
justify-content: center;
align-items: center;
border-radius: 5px;
font-family: sans-serif;
font-size: 10rem;
color: #00000080;
box-shadow: 0 5px 15px 0 #00000040, 0 5px 5px 0#00000020;
transition: transform 200ms;
}
.card {
transform: translateY(calc((var(--y) * 20px) - 50%)) scale(calc(1.0 + var(--y) * 0.05));
}
<div class="stack">
<div class="card" style="--y:1">1</div>
<div class="card" style="--y:2">2</div>
<div class="card" style="--y:3">3</div>
<div class="card" style="--y:4">4</div>
</div>