www.byjp.me/static/css/postcards.css

input[id^=postcard-] {
  display: none;
  width: 0;
  height: 0;
  overflow:hidden;
  visibility: hidden;

  &:checked ~ label .postcard  {
    --flip: 180deg;
  }
}

.postcard {
  aspect-ratio: var(--aspect-ratio);
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;

  --flip: 0deg;
  --p: perspective(1000px);
  --v1: calc(min(1, max(0,
    cos(var(--flip)),
    cos(var(--flip) + 180deg),
    tan(45deg + var(--flip)/2),
    tan(135deg + var(--flip)/2)
  )) * 192 + 64);
  --v2: calc(min(1, max(0,
    cos(var(--flip)),
    cos(var(--flip) + 180deg),
    tan(45deg - var(--flip)/2),
    tan(135deg - var(--flip)/2)
  )) * 192 + 64);
  --offset: translate(0px, 0px);

  .shadow {
    width: 90%;
    margin: 5%;
    aspect-ratio: var(--aspect-ratio);
    position: absolute;
    z-index: 0;
    transform-style: preserve-3d;
    background: rgb(0, 0, 0, 0.1) !important;
    box-shadow: 0px 0px 45px 45px rgb(0, 0, 0, 0.1);
    --offset: translate(40px, 40px);
  }

  &::before, &::after {
    content: '';
    width: 100%;
    aspect-ratio: var(--aspect-ratio);
    position: absolute;
    box-sizing: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    background-blend-mode: multiply;
    z-index: 2;
  }

  &.portrait {
    flex-direction: column;
  
    .shadow {
      width:auto;
      height:90%;
      margin: 5%;
    }

    &::before, &::after {
      width:auto;
      height:100%;
    }
  }

  &::after {
    background: no-repeat top/100%;
    mask: var(--postcard) top/100%;
  }
  
  &::before {
    background: no-repeat bottom/100%;
    mask: var(--postcard) bottom/100%;
  }

  &::before, &::after, .shadow {
    transition: transform 1s ease-in-out;
  }

  /* TODO: Does this break accessibility? */
  img {
    display: none;
  }

  &.left-hand,&.right-hand {
    aspect-ratio: 1/1;
  }

  &.flip-book::after,&.flip-book .shadow {
    transform: var(--p) var(--offset) rotateY(var(--flip));
    background-image: linear-gradient(to right,
        rgb(var(--v1), var(--v1), var(--v1)),
        rgb(var(--v2), var(--v2), var(--v2))
      ), var(--postcard);
  }
  &.flip-book::before {
    transform: var(--p) rotateY(calc(var(--flip) + 180deg));
    background-image: linear-gradient(to right,
        rgb(var(--v1), var(--v1), var(--v1)),
        rgb(var(--v2), var(--v2), var(--v2))
      ), var(--postcard);
  }

  &.flip-calendar::after,&.flip-calendar .shadow {
    transform: var(--p) var(--offset) rotateX(var(--flip));
    background-image: linear-gradient(to top,
        rgb(var(--v1), var(--v1), var(--v1)),
        rgb(var(--v2), var(--v2), var(--v2))
      ), var(--postcard);
  }
  &.flip-calendar::before {
    transform: var(--p) rotateX(calc(var(--flip) + 180deg));
    background-image: linear-gradient(to top,
        rgb(var(--v1), var(--v1), var(--v1)),
        rgb(var(--v2), var(--v2), var(--v2))
      ), var(--postcard);
  }
  
  &.flip-right-hand::after,&.flip-right-hand .shadow {
    transform: var(--p) var(--offset) rotate3d(1,1,0,var(--flip));
    background-image: linear-gradient(to top right,
        rgb(var(--v1), var(--v1), var(--v1)),
        rgb(var(--v2), var(--v2), var(--v2))
      ), var(--postcard);
  }
  &.flip-right-hand::before {
    transform: var(--p) rotate3d(1,1,0,calc(var(--flip) + 180deg)) rotate(-90deg);
    background-image: linear-gradient(to bottom right,
        rgb(var(--v1), var(--v1), var(--v1)),
        rgb(var(--v2), var(--v2), var(--v2))
      ), var(--postcard);
  }
  
  &.flip-left-hand::after,&.flip-left-hand .shadow {
    transform: var(--p) var(--offset) rotate3d(-1,1,0,var(--flip));
    background-image: linear-gradient(to bottom right,
        rgb(var(--v1), var(--v1), var(--v1)),
        rgb(var(--v2), var(--v2), var(--v2))
      ), var(--postcard);
  }
  &.flip-left-hand::before {
    transform: var(--p) rotate3d(-1,1,0,calc(var(--flip) + 180deg)) rotate(90deg);
    background-image: linear-gradient(to top right,
        rgb(var(--v1), var(--v1), var(--v1)),
        rgb(var(--v2), var(--v2), var(--v2))
      ), var(--postcard);
  }
}