Di dalam kiub ada kiub ada kiub lagi

  Animasi CSS menggayakan kiub yang di dalamnya ada kiub ada kiub lagi ..

Demo

HTML view ▼

<div class="labu">
<div id="labi">
  <div id="bentuk" class="kiub">
    <div class="papan a"></div>
    <div class="papan b"></div>
    <div class="papan c"></div>
    <div class="papan d"></div>
    <div class="papan e"></div>
    <div class="papan f"></div>
    <div class="papan satu"></div>
    <div class="papan dua"></div>
    <div class="papan tiga"></div>
    <div class="papan empat"></div>
    <div class="papan lima"></div>
    <div class="papan enam"></div>
    <div class="papan tujuh"></div>
    <div class="papan lapan"></div>
    <div class="papan sembilan"></div>
    <div class="papan sepuluh"></div>
    <div class="papan seblas"></div>
    <div class="papan duablas"></div>
    <div class="papan tigablas"></div>
    <div class="papan empatblas"></div>
    <div class="papan limablas"></div>
    <div class="papan enamblas"></div>
    <div class="papan tujuhblas"></div>
    <div class="papan lapanblas"></div>
  </div>
</div>
</div>
<style>
.labu * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.labu {
  min-height: 80vh;
  display: grid;
  place-items: center;  
  background-color: #293d47;
  position: relative;
}
#labi {
  display: grid;
  place-items: center;
  width: 100%;
  height: 200px;
  perspective: 800px;
  perspective-origin: 50% 35%;
  transform-style: preserve-3d;
}
#bentuk {
  position: relative;
  margin: 0 auto;
  height: 200px;
  width: 200px;
  transform: rotateX(70deg) rotateY(-25deg);
  transform-style: preserve-3d;
}
.papan {
  display: grid;
  place-items: center;
  position: absolute;
  height: 200px;
  width: 200px;
  border: 1px solid #ea9999;
  box-sizing: border-box;  
  text-align: center;
  transition: 2s, opacity 4s;
  backface-visibility: visible;
}
.a, .b, .c, .d, .e, .f {
  background: linear-gradient(
    to bottom right,
    rgba(255 255 255 / 0.7),
    rgba(255 255 255 / 0.5),
    rgba(255 255 255 / 0.7)
  );
}
.satu, .dua, .tiga, .empat, .lima, .enam {
  background: linear-gradient(
    to bottom right,
    rgba(255 0 255 / 0.8),
    rgba(0 255 255 / 0.4),
    rgba(255 255 0 / 0.8)
  );
}
.tujuh, .lapan, .sembilan, .sepuluh, .seblas, .duablas {
  background: rgba(0 255 255 / 1);
}
.tigablas, .empatblas, .limablas, .enamblas, .tujuhblas, .lapanblas {
  background: rgba(255 255 0 / 1);
}
.kiub > .a {
  opacity: 0.5;
  color: purple;
  transform: scale3d(1.6, 1.6, 1.6) rotateX(90deg) translateZ(100px);
}
.kiub > .b {
  opacity: 0.5;
  color: purple;
  transform: scale3d(1.6, 1.6, 1.6) translateZ(100px);
}
.kiub > .c {
  opacity: 0.5;
  color: purple;
  transform: scale3d(1.6, 1.6, 1.6) rotateY(90deg) translateZ(100px);
}
.kiub > .d {
  opacity: 0.5;
  color: purple;
  transform: scale3d(1.6, 1.6, 1.6) rotateY(180deg) translateZ(100px);
}
.kiub > .e {
  opacity: 0.5;
  color: purple;
  transform: scale3d(1.6, 1.6, 1.6) rotateY(-90deg) translateZ(100px);
}
.kiub > .f {
  opacity: 0.5;
  color: purple;
  transform: scale3d(1.6, 1.6, 1.6) rotateX(-90deg) translateZ(100px);
}
.kiub > .satu {
  opacity: 0.5;
  color: purple;
  transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
}
.kiub > .dua {
  opacity: 0.5;
  color: purple;
  transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
}
.kiub > .tiga {
  opacity: 0.5;
  color: purple;
  transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
}
.kiub > .empat {
  opacity: 0.5;
  color: purple;
  transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
}
.kiub > .lima {
  opacity: 0.5;
  color: purple;
  transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
}
.kiub > .enam {
  opacity: 0.5;
  color: purple;
  transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px)
    rotate(180deg);
}
.kiub > .tujuh {
  opacity: 0.65;
  color: rebeccapurple;
  transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(100px) rotate(0);
}
.kiub > .lapan {
  opacity: 0.65;
  color: rebeccapurple;
  transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);
}
.kiub > .sembilan {
  opacity: 0.65;
  color: rebeccapurple;
  transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(100px);
}
.kiub > .sepuluh {
  opacity: 0.65;
  color: rebeccapurple;
  transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(100px);
}
.kiub > .seblas {
  opacity: 0.65;
  color: rebeccapurple;
  transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(100px);
}
.kiub > .duablas {
  opacity: 0.65;
  color: rebeccapurple;
  transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(100px);
}
.kiub > .tigablas {
  opacity: 1;
  color: black;
  transform: scale3d(0.4, 0.4, 0.4) rotateX(90deg) translateZ(100px);
}
.kiub > .empatblas {
  opacity: 1;
  color: black;
  transform: scale3d(0.4, 0.4, 0.4) translateZ(100px);
}
.kiub > .limablas {
  opacity: 1;
  color: black;
  transform: scale3d(0.4, 0.4, 0.4) rotateY(90deg) translateZ(100px);
}
.kiub > .enamblas {
  opacity: 1;
  color: black;
  transform: scale3d(0.4, 0.4, 0.4) rotateY(180deg) translateZ(100px);
}
.kiub > .tujuhblas {
  opacity: 1;
  color: black;
  transform: scale3d(0.4, 0.4, 0.4) rotateY(-90deg) translateZ(100px);
}
.kiub > .lapanblas {
  opacity: 1;
  color: black;
  transform: scale3d(0.4, 0.4, 0.4) rotateX(-90deg) translateZ(100px);
}
#bentuk {
  animation: spin 25s infinite ease forwards;
}
@keyframes spin {
  0%,
  100% {
    transform: rotateX(70deg) rotateY(0);
  }
  50% {
    transform: rotateX(-50deg) rotateY(-160deg);
  }
}
@keyframes papan {
  0%,
  100% {
    width: 200px;
    height: 200px;
  }
  50% {
    width: 150px;
    height: 150px;
  }
}
  </style>

Tutup