card3d.css

me {
    position: relative; width: 225px; height: 300px; padding: 1em; display: flex;
    flex-direction: column; justify-content: flex-end;
    font-weight: bold; text-align: var(--tpl-align); text-shadow: 0 0 4px #000; color: #ddd;
    -webkit-text-stroke: 1px black; margin: 1em; font-size: 1.25em;
    box-shadow: 0 1px 5px #00000099; border-radius: 10px; background: var(--tpl-bgurl) center/cover;
    transition: .3s ease-out; transition-property: transform, box-shadow;
    touch-action: none; /* Prevents scrolling on touch devices */
}
me:hover { transition-duration: .15s; box-shadow: 0 5px 20px 5px #00000044; }
me > div {
    position: absolute; inset: 0; border-radius: 10px;
    background-image: radial-gradient(circle at 90% -20%, #ffffff55, #0000000f);
    pointer-events: none; /* Allows touch events to pass through */
}