An nth-child CSS trick

nth_child.css

:nth-child(1) { --nth-child: 1 }
:nth-child(2) { --nth-child: 2 }
:nth-child(3) { --nth-child: 3 }
:nth-child(4) { --nth-child: 4 }
:nth-child(5) { --nth-child: 5 }
/* ... */

* {
  background-color: hsl(calc(100 * var(--nth-child)) 100% 40%);
}

.class {
    /* We want to start counting at 0 */
    --v: var(--nth-last-child) - 1;
    opacity: 1 - calc(var(--v) * 0.15);
    transform:
        translate3d(
            50%, 
            calc(-5px * var(--v)), 
            calc(-1px * var(--v)) 
        scale(calc(1 - var(--v) * 0.05);
}