word/memory.css

   1 /* cards */
   2 #quiz {
   3         display: grid;
   4         grid: auto / repeat(6, 1fr);
   5         grid-gap: 1ex;
   6 }
   7 html {
   8         overflow: hidden; /* rotation overflow on celebration */
   9 }
  10
  11 figure {
  12         background: #224;
  13         border: 1px solid #888;
  14         perspective: 100em;
  15 }
  16 figure:not(.turn):hover {
  17         cursor: pointer;
  18 }
  19 figure, img {
  20         transition: all .5s ease-in;
  21 }
  22
  23 /* card faces */
  24 figure img {
  25         backface-visibility: hidden;
  26         -webkit-backface-visibility: hidden;
  27         transform: rotateY(180deg); /* back */
  28         transform-style: preserve-3d;
  29         float: left; /* ff workaround to prevent click selection */
  30         height: 100%;
  31         object-fit: contain; /* center */
  32 }
  33 figure.mirror img {
  34         transform: rotateY(180deg) scaleX(-1);
  35 }
  36
  37 /* turn results */
  38 figure.turn img {
  39         transform: rotateY(0deg);
  40 }
  41 figure.mirror.turn img {
  42         transform: rotateY(0deg) scaleX(-1);
  43 }
  44 figure.bad img {
  45         filter: sepia(.5) hue-rotate(-45deg) saturate(2); /* red tint */
  46 }
  47 figure.good {
  48         opacity: .8;
  49 }
  50
  51 .good figure {
  52         animation: celebration 7s linear infinite;
  53         background: none;
  54         border: 0;
  55         opacity: 1;
  56 }
  57 @keyframes celebration {
  58         0% { filter: hue-rotate(0deg); transform: rotate(0deg) }
  59         33% { filter: hue-rotate(180deg); transform: rotate(180deg) }
  60         66% { filter: hue-rotate(360deg); transform: rotate(360deg) }
  61         100% { filter: hue-rotate(360deg); transform: rotate(360deg) }
  62 }