Melipat jadi kotak

Demo

HTML view ▼

<div class="labu">
<labi>
<div class="lantai">
<div class="kotak__bks">
<div class="kotak">
<div class="muk back" style="--transform:rotatex(-90deg); --grad:to top;"></div>
<div class="muk bottom"></div>
<div class="grup" style="--transform:rotatex(90deg);">
<div class="muk front" style="--grad: to bottom"></div>
<div class="muk top" style="--transform:rotatex(90deg); --grad: to bottom"></div>
</div>
<div class="muk left" style="--transform:rotatey(90deg); --grad: to left"></div>
<div class="muk right" style="--transform:rotatey(-90deg); --grad: to right"></div>
</div>
</div>
<div class="kotak__bks">
<div class="kotak">
<div class="muk back" style="--transform:rotatex(-90deg); --grad:to top;"></div>
<div class="muk bottom"></div>
<div class="grup" style="--transform:rotatex(90deg);">
<div class="muk front" style="--grad: to bottom"></div>
<div class="muk top" style="--transform:rotatex(90deg); --grad: to bottom"></div>
</div>
<div class="muk left" style="--transform:rotatey(90deg); --grad: to left"></div>
<div class="muk right" style="--transform:rotatey(-90deg); --grad: to right"></div>
</div>
</div>
</div>
</labi></div>
<style>
:root {
  --anim-duration: 6s;
  --anim-total-duration: calc(var(--anim-duration) * 2);
  --anim-delay: 0s;
  --anim-props: ease-in-out infinite;
  --clr-kotak-1: #fce5cd;
  --clr-kotak-2: #cfe2f3;
  --clr-lines: #ccc;
  --clr-bg: #2a2b31;
  --grid-v: repeating-linear-gradient(
  to right,
  transparent 0,
  transparent calc(9vmin - 1px),
  var(--clr-lines) 0,
  var(--clr-lines) 9vmin
  );
  --grid-h: repeating-linear-gradient(
  to bottom,
  transparent 0,
  transparent calc(9vmin - 1px),
  var(--clr-lines) 0,
  var(--clr-lines) 9vmin
  );
  --bounce: cubic-bezier(0.4, 0, 0.48, 1.46);
}
.labu {
  margin: 0;
  width: 100%;
  min-height: 500px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--clr-bg);
}
labi {
  perspective: 30rem;
}
labi * {
  transform-style: preserve-3d;
}
.lantai {
  display: grid;
  width: 81vmin;
  height: 72vmin;
  grid-template-columns: repeat(9, 9vmin);
  grid-template-rows: repeat(8, 9vmin);
  background: #ea9999;
  background-image: radial-gradient(ellipse at center, transparent 25%, var(--clr-bg) 70%), var(--grid-h), var(--grid-v);
  -webkit-animation: var(--anim-total-duration) var(--anim-props) lantai;
          animation: var(--anim-total-duration) var(--anim-props) lantai;
}
.kotak__bks:nth-of-type(1) {
  grid-area: 4/4/8/7;
}
.kotak__bks:nth-of-type(1) .muk {
  background: var(--clr-kotak-1);
}
.kotak__bks:nth-of-type(2) {
  grid-area: 1/5/5/8;
  transform: rotateZ(180deg);
  --anim-delay: -0.5s;
}
.kotak__bks:nth-of-type(2) .muk {
  background: var(--clr-kotak-2);
}
.kotak__bks {
  position: relative;
}
.kotak__bks:after {
  position: absolute;
  content: "";
  width: 9vmin;
  height: 9vmin;
  top: 9vmin;
  left: 9vmin;
  background: rgba(0, 0, 0, 0.6);
  -webkit-animation: var(--anim-duration) var(--anim-props) var(--anim-delay) kotak-shadow;
          animation: var(--anim-duration) var(--anim-props) var(--anim-delay) kotak-shadow;
}
.kotak {
  display: grid;
  grid-template-columns: repeat(3, 9vmin);
  grid-template-rows: repeat(4, 9vmin);
  transform-origin: 50% 37.5% 4.5vmin;
  -webkit-animation: var(--anim-duration) var(--anim-props) var(--anim-delay) kotak-anim;
          animation: var(--anim-duration) var(--anim-props) var(--anim-delay) kotak-anim;
}
.muk {
  position: relative;
  box-shadow: 0 0 1.5vmin rgba(255, 255, 255, 0.25) inset;
}
.muk:before, .muk:after {
  content: "";
  position: absolute;
  inset: 0;
}
.muk:before {
  background: #ea9999;
  transform: translate3d(0, 0, 1px);
  background-image: var(--grid-h), var(--grid-v);
}
.muk:after {
  -webkit-animation: var(--anim-duration) var(--anim-props) var(--anim-delay) muk-shadow;
          animation: var(--anim-duration) var(--anim-props) var(--anim-delay) muk-shadow;
}
.muk.back {
  grid-area: 1/2;
  transform-origin: 50% 100%;
}
.muk.bottom {
  grid-area: 2/2;
}
.grup {
  grid-area: 3/2/5/3;
  transform-origin: 50% 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}
.muk.front {
  grid-area: 1/1;
}
.muk.top {
  grid-area: 2/1;
  transform-origin: 50% 0;
}
.muk.left {
  grid-area: 2/1;
  transform-origin: 100% 50%;
}
.muk.right {
  grid-area: 2/3;
  transform-origin: 0 50%;
}
.muk.back,
.grup,
.muk.top,
.muk.left,
.muk.right {
  -webkit-animation: var(--anim-duration) var(--anim-props) var(--anim-delay) mlipat;
          animation: var(--anim-duration) var(--anim-props) var(--anim-delay) mlipat;
}
@-webkit-keyframes mlipat {
  10%, 90% {
    transform: rotatey(0);
  }
  20%, 80% {
    transform: var(--transform);
  }
}
@keyframes mlipat {
  10%, 90% {
    transform: rotatey(0);
  }
  20%, 80% {
    transform: var(--transform);
  }
}
@-webkit-keyframes muk-shadow {
  0%, 100% {
    background-image: linear-gradient(var(--grad), rgba(0, 0, 0, 0.75) 100%, rgba(0, 0, 0, 0));
  }
  20%, 80% {
    background-image: linear-gradient(var(--grad), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  }
}
@keyframes muk-shadow {
  0%, 100% {
    background-image: linear-gradient(var(--grad), rgba(0, 0, 0, 0.75) 100%, rgba(0, 0, 0, 0));
  }
  20%, 80% {
    background-image: linear-gradient(var(--grad), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  }
}
@-webkit-keyframes lantai {
  0%, 10% {
    transform: rotatex(0);
  }
  20%, 80% {
    transform: rotatex(40deg) rotatez(45deg);
  }
  90%, 100% {
    transform: rotatex(0) rotatez(0);
  }
}
@keyframes lantai {
  0%, 10% {
    transform: rotatex(0);
  }
  20%, 80% {
    transform: rotatex(40deg) rotatez(45deg);
  }
  90%, 100% {
    transform: rotatex(0) rotatez(0);
  }
}
@-webkit-keyframes kotak-shadow {
  0%, 10% {
    filter: blur(0);
  }
  20% {
    filter: blur(1.8vmin);
  }
  25% {
    -webkit-animation-timing-function: var(--bounce);
            animation-timing-function: var(--bounce);
    filter: blur(1.8vmin);
    transform: scale(1);
    opacity: 1;
  }
  35% {
    filter: blur(2.25vmin);
    transform: scale(0.65);
    opacity: 0.75;
  }
  75% {
    transform: scale(0.65) rotatez(1turn);
    -webkit-animation-timing-function: var(--bounce);
            animation-timing-function: var(--bounce);
  }
  85% {
    transform: scale(1) rotatez(1turn);
    opacity: 1;
    filter: blur(1.8vmin);
  }
  90%, 100% {
    filter: blur(0);
    opacity: 0;
  }
}
@keyframes kotak-shadow {
  0%, 10% {
    filter: blur(0);
  }
  20% {
    filter: blur(1.8vmin);
  }
  25% {
    -webkit-animation-timing-function: var(--bounce);
            animation-timing-function: var(--bounce);
    filter: blur(1.8vmin);
    transform: scale(1);
    opacity: 1;
  }
  35% {
    filter: blur(2.25vmin);
    transform: scale(0.65);
    opacity: 0.75;
  }
  75% {
    transform: scale(0.65) rotatez(1turn);
    -webkit-animation-timing-function: var(--bounce);
            animation-timing-function: var(--bounce);
  }
  85% {
    transform: scale(1) rotatez(1turn);
    opacity: 1;
    filter: blur(1.8vmin);
  }
  90%, 100% {
    filter: blur(0);
    opacity: 0;
  }
}
@-webkit-keyframes kotak-anim {
  25% {
    -webkit-animation-timing-function: var(--bounce);
            animation-timing-function: var(--bounce);
    transform: translatez(0);
  }
  35% {
    transform: translatez(9vmin);
  }
  75% {
    transform: translatez(9vmin) rotatez(1turn);
    -webkit-animation-timing-function: var(--bounce);
            animation-timing-function: var(--bounce);
  }
  85%, 100% {
    transform: translatez(0) rotatez(1turn);
  }
}
@keyframes kotak-anim {
  25% {
    -webkit-animation-timing-function: var(--bounce);
            animation-timing-function: var(--bounce);
    transform: translatez(0);
  }
  35% {
    transform: translatez(9vmin);
  }
  75% {
    transform: translatez(9vmin) rotatez(1turn);
    -webkit-animation-timing-function: var(--bounce);
            animation-timing-function: var(--bounce);
  }
  85%, 100% {
    transform: translatez(0) rotatez(1turn);
  }
}
@-webkit-keyframes namala {
  0%, 8% {
    transform: translateX(150%);
    opacity: 0;
  }
  18%, 100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes namala
  0%, 8% {
    transform: translateX(150%);
    opacity: 0;
  }
  18%, 100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
</style>

Tutup