flip-clock.pcss

.flip-clock {
  @apply text-center;

  perspective: 600px;
}

.flip-clock__piece {
  @apply relative inline-flex justify-center mx-1;
}

.flip-clock__slot {
  @apply absolute block bottom-0 z-50;

  transform: translateY(55%);
  text-shadow: 0 0 1.5rem theme('colors.black');
}

.flip-card {
  @apply block relative font-alt;

  padding-bottom: 0.85em;

  /* Additional outline around clock */
  &:after {
    @apply absolute;

    content: "";
    position: absolute;
    width: 90%;
    height: 108%;
    top: -4%;
    left: 5%;
    z-index: -1;
  }
}

.flip-card__top,
.flip-card__bottom,
.flip-card__back-bottom,
.flip-card__back:before,
.flip-card__back:after,
.flip-card__top-4digits,
.flip-card__bottom-4digits,
.flip-card__back-bottom-4digits,
.flip-card__back-4digits:before,
.flip-card__back-4digits:after {
  @apply block text-white bg-black;

  height: 0.85em;
  padding: 0.35em 0.1em 0.4em;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

.flip-card:after,
.flip-card__top,
.flip-card__bottom,
.flip-card__back:before,
.flip-card__back:after,
.flip-card__back-bottom,
.flip-card__bottom-4digits,
.flip-card__back-bottom-4digits {
  @apply border border-grey-300;
}

.flip-card__top,
.flip-card__back:before,
.flip-card__back:after {
  @apply border-b-0;
}

.flip-card__top,
.flip-card__bottom,
.flip-card__back-bottom,
.flip-card__back:before,
.flip-card__back:after {
  width: 1.9em;
}

.flip-card__top-4digits,
.flip-card__bottom-4digits,
.flip-card__back-bottom-4digits,
.flip-card__back-4digits:before,
.flip-card__back-4digits:after {
  width: 2.4em;
}

.flip-card__bottom,
.flip-card__back-bottom,
.flip-card__bottom-4digits,
.flip-card__back-bottom-4digits {
  @apply absolute left-0 pointer-events-none;

  left: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.flip-card__back-bottom,
.flip-card__back-bottom-4digits {
  z-index: 1;
}

.flip-card__bottom:after,
.flip-card__back-bottom:after,
.flip-card__bottom-4digits:after,
.flip-card__back-bottom-4digits:after {
  @apply block;
  margin-top: -0.85em;
}

.flip-card__back:before,
.flip-card__bottom:after,
.flip-card__back-bottom:after,
.flip-card__back-4digits:before,
.flip-card__bottom-4digits:after,
.flip-card__back-bottom-4digits:after {
  content: attr(data-value);
}

.flip-card__back,
.flip-card__back-4digits {
  @apply absolute top-0 h-full left-0 pointer-events-none;
}

.flip-card__back:before,
.flip-card__back-4digits:before {
  @apply relative overflow-hidden;
  z-index: -1;
}

.flip .flip-card__back:before,
.flip .flip-card__back-4digits:before {
  z-index: 1;
  animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
  animation-fill-mode: both;
  transform-origin: center bottom;
}

.flip .flip-card__bottom,
.flip .flip-card__bottom-4digits {
  transform-origin: center top;
  animation-fill-mode: both;
  animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
}

@keyframes flipTop {
  0% {
    transform: rotateX(0deg);
    z-index: 2;
  }
  0%,
  99% {
    opacity: 1;
  }
  100% {
    transform: rotateX(-90deg);
    opacity: 0;
  }
}

@keyframes flipBottom {
  0%,
  50% {
    z-index: -1;
    transform: rotateX(90deg);
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg);
    z-index: 5;
  }
}