cssを使用して効果のようなカードのスタックを作成しようとしています。前のカードに基づいて位置カードが必要です。CSSである種の方程式を書く方法はありますか? jquery を使用してこれを実現できますが、css でそれができるかどうかを知りたいです。この場合、動的になるカードはありません。
.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;
}