Animasi 3 kotak

  Animasi 3 kotak, guna CSS sahaja.

Demo

HTML view ▼

<div class="labu">
  <div class="labi">
  <div class="lantai">
    <div class="pamer">
      <div></div><div></div><div></div><div></div>
    </div>
  </div>
  <div class="bawah">
    <i>
      <div class="tengah">
        <i></i><i></i><i></i><i></i><i>
        <div class="atas">
          <i></i><i></i><i></i><i></i><i></i>
        </div>
        </i>
      </div>
    </i><i></i><i></i><i></i><i></i>
  </div>
</div>
</div>
<style>
  .labu *, .labu *::before, .labu *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}
.labu {
  background-color: #2B3F48;
  color: #fff;
  border-radius: 10px;
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 75em;
  overflow: hidden;
}
.labu *:not(:empty) {
  transform-style: preserve-3d;
}
.labi {
  position: relative;
  -webkit-animation: labiRotate 78s infinite linear;
          animation: labiRotate 78s infinite linear;
}
@-webkit-keyframes labiRotate {
  from {
    transform: rotateX(-15deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-15deg) rotateY(360deg);
  }
}
@keyframes labiRotate {
  from {
    transform: rotateX(-15deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-15deg) rotateY(360deg);
  }
}
.lantai {
  position: absolute;
  inset: -50em;
  background-color: #2B3F48;
  background-image: radial-gradient(#0000, #2B3F48 50em), repeating-linear-gradient(45deg, #fff1, #0001, #fff1 2em), repeating-linear-gradient(-45deg, #fff1, #0001, #fff1 2em);
  transform: rotateX(90deg) translateZ(calc(-6.4em - 1px));
}
.lantai::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14.8em;
  height: 14.8em;
  box-shadow: 0 0 2em #0007;
  transform: translate(-50%, -50%);
}
.pamer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12em;
  height: 12em;
  transform: translate3d(-50%, -50%, 1.4em);
  background: inherit;
  box-shadow: 0 0 1em #0007 inset;
}
.pamer > div {
  position: absolute;
  left: -1.5em;
  top: 50%;
  width: 15em;
  height: 2.1em;
  background: inherit;
  box-shadow: inherit;
  -webkit-clip-path: polygon(1.5em 0, 13.5em 0, 100% 100%, 0 100%);
          clip-path: polygon(1.5em 0, 13.5em 0, 100% 100%, 0 100%);
  transform-origin: top;
  transform: rotateZ(var(--rz, 0deg)) translateY(6em) rotateX(-45deg);
}
.pamer > div:nth-child(1) {
  --rz: 0deg;
}
.pamer > div:nth-child(2) {
  --rz: 90deg;
}
.pamer > div:nth-child(3) {
  --rz: 180deg;
}
.pamer > div:nth-child(4) {
  --rz: 270deg;
}
.pamer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6em;
  height: 6em;
  background-color: #0003;
  filter: blur(0.5em);
  -webkit-animation: kelabu 6s infinite ease-in-out;
          animation: kelabu 6s infinite ease-in-out;
}
@-webkit-keyframes kelabu {
  0%, 95%, 100% {
    transform: translate(-0.5em, -0.5em);
  }
  20%, 25% {
    transform: translate(-5.5em, -0.5em);
  }
  45%, 50% {
    transform: translate(-5.5em, -5.5em);
  }
  70%, 75% {
    transform: translate(-0.5em, -5.5em);
  }
}
@keyframes kelabu {
  0%, 95%, 100% {
    transform: translate(-0.5em, -0.5em);
  }
  20%, 25% {
    transform: translate(-5.5em, -0.5em);
  }
  45%, 50% {
    transform: translate(-5.5em, -5.5em);
  }
  70%, 75% {
    transform: translate(-0.5em, -5.5em);
  }
}
.bawah, .tengah, .atas {
  position: absolute;
  background-color: hsla(var(--hue, 0), 75%, 75%, 0.5);
  background-image: repeating-linear-gradient(45deg, #fff1, #0001, #fff1 1em), repeating-linear-gradient(-45deg, #fff1, #0001, #fff1 1em);
  box-shadow: 0 0 1em hsl(var(--hue, 0), 90%, 10%) inset;
}
.bawah {
  --hue: 320;
  left: 0;
  top: 0;
  width: 5em;
  height: 5em;
  transform-origin: bottom left;
  -webkit-animation: bawah 6s infinite ease-in-out;
          animation: bawah 6s infinite ease-in-out;
}
@-webkit-keyframes bawah {
  0% {
    transform: none;
  }
  20%, 25% {
    transform: rotateZ(-90deg);
  }
  45%, 50% {
    transform: rotateZ(-90deg) rotateY(90deg);
  }
  70%, 75% {
    transform: rotateZ(-90deg) rotateY(90deg) rotateX(-90deg);
  }
  95%, 100% {
    transform: rotateZ(-90deg) rotateY(90deg) rotateX(-90deg) rotateZ(-90deg);
  }
}
@keyframes bawah {
  0% {
    transform: none;
  }
  20%, 25% {
    transform: rotateZ(-90deg);
  }
  45%, 50% {
    transform: rotateZ(-90deg) rotateY(90deg);
  }
  70%, 75% {
    transform: rotateZ(-90deg) rotateY(90deg) rotateX(-90deg);
  }
  95%, 100% {
    transform: rotateZ(-90deg) rotateY(90deg) rotateX(-90deg) rotateZ(-90deg);
  }
}
.tengah {
  --hue: 280;
  inset: 0;
  transform-origin: bottom right;
  -webkit-animation: tengah 6s infinite ease-in-out;
          animation: tengah 6s infinite ease-in-out;
}
@-webkit-keyframes tengah {
  0%, 2% {
    transform: none;
  }
  23%, 27% {
    transform: rotateY(180deg);
  }
  48%, 52% {
    transform: rotateY(180deg) rotateZ(-180deg);
  }
  73%, 77% {
    transform: rotateY(180deg) rotateZ(-180deg) rotateX(180deg);
  }
  98%, 100% {
    transform: rotateY(180deg) rotateZ(-180deg) rotateX(180deg) rotateY(180deg);
  }
}
@keyframes tengah {
  0%, 2% {
    transform: none;
  }
  23%, 27% {
    transform: rotateY(180deg);
  }
  48%, 52% {
    transform: rotateY(180deg) rotateZ(-180deg);
  }
  73%, 77% {
    transform: rotateY(180deg) rotateZ(-180deg) rotateX(180deg);
  }
  98%, 100% {
    transform: rotateY(180deg) rotateZ(-180deg) rotateX(180deg) rotateY(180deg);
  }
}
.atas {
  --hue: 240;
  inset: 0;
  transform-origin: top left;
  -webkit-animation: atas 6s infinite ease-in-out;
          animation: atas 6s infinite ease-in-out;
}
@-webkit-keyframes atas {
  0%, 5% {
    transform: none;
  }
  25%, 30% {
    transform: rotateY(-180deg);
  }
  50%, 55% {
    transform: rotateY(-180deg) rotateZ(-180deg);
  }
  75%, 80% {
    transform: rotateY(-180deg) rotateZ(-180deg) rotateX(-180deg);
  }
  100% {
    transform: rotateY(-180deg) rotateZ(-180deg) rotateX(-180deg) rotateY(-180deg);
  }
}
@keyframes atas {
  0%, 5% {
    transform: none;
  }
  25%, 30% {
    transform: rotateY(-180deg);
  }
  50%, 55% {
    transform: rotateY(-180deg) rotateZ(-180deg);
  }
  75%, 80% {
    transform: rotateY(-180deg) rotateZ(-180deg) rotateX(-180deg);
  }
  100% {
    transform: rotateY(-180deg) rotateZ(-180deg) rotateX(-180deg) rotateY(-180deg);
  }
}
i {
  position: absolute;
  inset: 0;
  background: inherit;
  box-shadow: inherit;
}
i:nth-child(1) {
  transform: rotateX(90deg);
  transform-origin: top;
}
i:nth-child(2) {
  transform: rotateX(-90deg);
  transform-origin: bottom;
}
i:nth-child(3) {
  transform: rotateY(-90deg);
  transform-origin: left;
}
i:nth-child(4) {
  transform: rotateY(90deg);
  transform-origin: right;
}
i:nth-child(5) {
  transform: translateZ(5em);
}
</style>

Tutup