How to get css variables from counter? (Building a Playing-card animation)

4

Very nice ! I tweaked the css a bit : Point and click — a demo of image map & alternatives

@@.cardcontainer
<$list filter="[range[1;12]]" counter="counter">
<div class="ccard" style=`--i:${ [<counter>subtract[6]] }$`>{{Tarot}}
</div>
</$list>
@@

$$$text/vnd.tiddlywiki
\rules except dash
<style>
.cardcontainer{
height:400px;
display:grid;
place-items: center;

& .ccard {
    position: absolute;
    width: 240px;
    aspect-ratio: 0.75;
    transition: 0.5s;
    transform-origin: 50% 100%;
}

&:hover .ccard {
z-index:0;
transform:
rotate(calc(var(--i) * 5deg))
translate(calc(var(--i) * 50px), var(--y,-40px));
}

&:hover .ccard:hover{
--y:-90px;
}

& .ccard:active {
    translate: calc(var(--i)*20px)-50px;
}
}
</style>