Kiub buat trik

Demo

HTML view ▼

<div style="background: #7f6000; border-radius: 10px; height: 40em; position: relative;"><div class="assembly">
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="switch--out">
    <div class="mover">
      <div class="switch--in">
        <div class="cube"></div>
      </div>
    </div>
  </div>
  <div class="switch--out">
    <div class="mover">
      <div class="switch--in">
        <div class="cube"></div>
      </div>
    </div>
  </div>
  <div class="switch--out">
    <div class="mover">
      <div class="switch--in">
        <div class="cube"></div>
      </div>
    </div>
  </div>
  <div class="switch--out">
    <div class="mover">
      <div class="switch--in">
        <div class="cube"></div>
      </div>
    </div>
  </div>
  <div class="switch--out">
    <div class="mover">
      <div class="switch--in">
        <div class="cube"></div>
      </div>
    </div>
  </div>
</div>
</div>
<style>
 .assembly, :before, .assembly *, :after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  background: currentColor;
}
.assembly {
  transform: rotateX(-35deg) rotateY(-45deg);
}
.assembly > :nth-child(5n+1) {
  top: calc(50% + 10em);
  color: #222;
}
.switch--out:nth-child(5n+1), .switch--out:nth-child(5n+1) * {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.assembly > :nth-child(5n+2) {
  top: calc(50% + 5em);
  color: #401a2a;
}
.switch--out:nth-child(5n+2), .switch--out:nth-child(5n+2) * {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}
.assembly > :nth-child(5n+3) {
  top: calc(50% + 0em);
  color: #741a38;
}
.switch--out:nth-child(5n+3), .switch--out:nth-child(5n+3) * {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.assembly > :nth-child(5n+4) {
  top: calc(50% + -5em);
  color: #9b123c;
}
.switch--out:nth-child(5n+4), .switch--out:nth-child(5n+4) * {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.assembly > :nth-child(5n+5) {
  top: calc(50% + -10em);
  color: #c10a40;
}
.switch--out:nth-child(5n+5), .switch--out:nth-child(5n+5) * {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
[class*=switch] {
  -webkit-animation: switch 2s steps(4) infinite;
          animation: switch 2s steps(4) infinite;
}
.switch--out {
  animation-direction: reverse;
  -webkit-animation-timing-function: steps(4, start);
          animation-timing-function: steps(4, start);
}
@-webkit-keyframes switch {
  to {
    transform: rotateY(1turn);
  }
}
@keyframes switch {
  to {
    transform: rotateY(1turn);
  }
}
.mover {
  -webkit-animation: move 0.5s ease-in-out infinite;
          animation: move 0.5s ease-in-out infinite;
}
@-webkit-keyframes move {
  75% {
    transform: translate(8.4em) scale3d(1, 1, 1);
  }
  100% {
    transform: translate(11.2em) scale3d(0, 0, 0);
  }
}
@keyframes move {
  75% {
    transform: translate(8.4em) scale3d(1, 1, 1);
  }
  100% {
    transform: translate(11.2em) scale3d(0, 0, 0);
  }
}
.cube {
  margin: -1em;
  width: 2em;
  height: 2em;
  transform: translateZ(1em);
}
.cube:before, .cube:after {
  width: inherit;
  height: inherit;
  content: "";
}
.cube:before {
  top: 0;
  left: 100%;
  transform-origin: 0 50%;
  transform: rotateY(90deg);
  filter: brightness(1.15);
}
.cube:after {
  top: -100%;
  left: 0;
  transform-origin: 50% bottom;
  transform: rotateX(90deg);
  filter: brightness(1.3);
}
  /* Hilangkan petak kecil yg muncul di snippet PopularPosts */
.PopularPosts .popular-posts-snippet .snippet-fade {
  color: transparent;
  }    
</style>

Tutup

CSS disesuaikan untuk paparan di blog ini. Demo ini dipetik dari codepen.