Card Test

@property --degx {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: true;
}
@property --degy {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: true;
}
 
:root {
    --grid-size: 10;
}
 
.card-wrapper {
    width: 300px;
    height: 300px;
    display: grid;
    grid-template: repeat(var(--grid-size), 1fr) / repeat(var(--grid-size), 1fr);
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
}
.cell {
    z-index: 1;
}
.card {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: solid 2px #000;
    transform: rotateX(var(--degx)) rotateY(var(--degy));
    transition-property: --degx, --degy;
    transition-duration: 0.2s;
 
    .cell:nth-child(n+1):nth-child(-n+10):hover ~ & { --degx: 13.5deg; }
    .cell:nth-child(n+11):nth-child(-n+20):hover ~ & { --degx: 10.5deg; }
    .cell:nth-child(n+21):nth-child(-n+30):hover ~ & { --degx: 7.5deg; }
    .cell:nth-child(n+31):nth-child(-n+40):hover ~ & { --degx: 4.5deg; }
    .cell:nth-child(n+41):nth-child(-n+50):hover ~ & { --degx: 1.5deg; }
    .cell:nth-child(n+51):nth-child(-n+60):hover ~ & { --degx: -1.5deg; }
    .cell:nth-child(n+61):nth-child(-n+70):hover ~ & { --degx: -4.5deg; }
    .cell:nth-child(n+71):nth-child(-n+80):hover ~ & { --degx: -7.5deg; }
    .cell:nth-child(n+81):nth-child(-n+90):hover ~ & { --degx: -10.5deg; }
    .cell:nth-child(n+91):nth-child(-n+100):hover ~ & { --degx: -13.5deg; }
 
    .cell:nth-child(10n+1):hover ~ & { --degy: -13.5deg; }
    .cell:nth-child(10n+2):hover ~ & { --degy: -10.5deg; }
    .cell:nth-child(10n+3):hover ~ & { --degy: -7.5deg; }
    .cell:nth-child(10n+4):hover ~ & { --degy: -4.5deg; }
    .cell:nth-child(10n+5):hover ~ & { --degy: -1.5deg; }
    .cell:nth-child(10n+6):hover ~ & { --degy: 1.5deg; }
    .cell:nth-child(10n+7):hover ~ & { --degy: 4.5deg; }
    .cell:nth-child(10n+8):hover ~ & { --degy: 7.5deg; }
    .cell:nth-child(10n+9):hover ~ & { --degy: 10.5deg; }
    .cell:nth-child(10n):hover ~ & { --degy: 13.5deg; }
}