CSS : dynamic position/margin based on sibling - css

Question

I am trying to make stack of cards like effect using css. I want position card based on its preceding card. Is there a way I can write some sort of equations in CSS. I can achieve this using jquery , but I want to know if I can do that in css. no of cards are going to be dynamic in this case.
.card{ position:relative;left10px;} // this didnt work
/*html*/
<div id="uno-game">
<div id="pot">
</div>
<div id="my-cards">
<ul>
<li class="green card"><div class="card-inner">3</div></li>
<li class="red card"><div class="card-inner">3</div></li>
<li class="green card"><div class="card-inner">3</div></li>
<li class="blue card"><div class="card-inner">3</div></li>
<li class="yellow card"><div class="card-inner">3</div></li>
</ul>
</div>
</div>
/*css*/
#uno-game{
height: 500px;
width: 800px;
background: green;
border: 5px solid #000000;
border-radius: 10px;
margin: 100px;
}
#pot{
height: 100px;
width: 100px;
background: darkgreen;
margin: auto;
border: 3px solid darkolivegreen;
border-radius: 5px;
margin-top: 200px;
}
#my-cards{
position: relative;
bottom: 5px;
margin: auto;
}
.card{
display: block;
height: 100px;
width: 75px;
color: brown;
border: 1px solid #000;
border-radius: 5px;
position: relative;
left: 10px;
bottom: 10px;
float: left;
padding: 5px;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.card:hover{
z-index: 1;
}
.card-inner{
height: 49%;
width: 54%;
background: wheat;
border-radius: 40px;
margin-top: 25px;
margin-left: 5px;
padding-left: 23px;
padding-top: 6px;
font-size: 35px;
font-weight: bold;
}
.green{
background: rgb(101, 156, 16);
}
.red{
background: orangered;
}
.blue{
background: skyblue;
}
.yellow{
background: yellow;
}

Answer 1

Try this CSS
.card + .card {
margin-left:-70px;
}

Answer 2

You can float the cards to left.
.card{
float: left;
margin-right: -5px; //you can change it according to your needs
}