.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.card {
  display: grid;
  place-items: center;
  height: 400px;
  width: 500px;
  background-color: aquamarine;
  margin-top: 20px;
}
.flip-scale-down-hor {
  -webkit-animation: flip-scale-down-hor 0.9s linear both;
  animation: flip-scale-down-hor 0.9s linear both;
}

@keyframes flip-scale-down-hor {
  0% {
    -webkit-transform: scale(1) rotateX(0);
    transform: scale(1) rotateX(0);
  }
  50% {
    -webkit-transform: scale(0.4) rotateX(90deg);
    transform: scale(0.4) rotateX(90deg);
  }
  100% {
    -webkit-transform: scale(1) rotateX(180deg);
    transform: scale(1) rotateX(180deg);
  }
}
.flip-scale-2-ver-left {
  -webkit-animation: flip-scale-2-ver-left 1.5s linear both;
  animation: flip-scale-2-ver-left 1.5s linear both;
}

@-webkit-keyframes flip-scale-2-ver-left {
  0% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
    transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
  }
  50% {
    -webkit-transform: translateX(-50%) rotateY(90deg) scale(2);
    transform: translateX(-50%) rotateY(90deg) scale(2);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  100% {
    -webkit-transform: translateX(-100%) rotateY(180deg) scale(1);
    transform: translateX(-100%) rotateY(180deg) scale(1);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
  }
}
@keyframes flip-scale-2-ver-left {
  0% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
    transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
  }
  50% {
    -webkit-transform: translateX(-50%) rotateY(90deg) scale(2);
    transform: translateX(-50%) rotateY(90deg) scale(2);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  100% {
    -webkit-transform: translateX(-100%) rotateY(180deg) scale(1);
    transform: translateX(-100%) rotateY(180deg) scale(1);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
  }
}
.flip-scale-down-diag-2 {
  -webkit-animation: flip-scale-down-diag-2 0.5s linear both;
  animation: flip-scale-down-diag-2 0.5s linear both;
}

@-webkit-keyframes flip-scale-down-diag-2 {
  0% {
    -webkit-transform: scale(1) rotate3d(-1, 1, 0, 0deg);
    transform: scale(1) rotate3d(-1, 1, 0, 0deg);
  }
  50% {
    -webkit-transform: scale(0.4) rotate3d(-1, 1, 0, -90deg);
    transform: scale(0.4) rotate3d(-1, 1, 0, -90deg);
  }
  100% {
    -webkit-transform: scale(1) rotate3d(-1, 1, 0, -180deg);
    transform: scale(1) rotate3d(-1, 1, 0, -180deg);
  }
}
@keyframes flip-scale-down-diag-2 {
  0% {
    -webkit-transform: scale(1) rotate3d(-1, 1, 0, 0deg);
    transform: scale(1) rotate3d(-1, 1, 0, 0deg);
  }
  50% {
    -webkit-transform: scale(0.4) rotate3d(-1, 1, 0, -90deg);
    transform: scale(0.4) rotate3d(-1, 1, 0, -90deg);
  }
  100% {
    -webkit-transform: scale(1) rotate3d(-1, 1, 0, -180deg);
    transform: scale(1) rotate3d(-1, 1, 0, -180deg);
  }
}

.rotate-90-bl-cw {
  -webkit-animation: rotate-90-bl-cw 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
  animation: rotate-90-bl-cw 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes rotate-90-bl-cw {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
  }
}
@keyframes rotate-90-bl-cw {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
  }
}