Kawanan kotak-kotak

.ground:hover * { -webkit-animation-play-state: paused; animation-play-state: paused; }

Hover, animasi berhenti.

Demo

HTML view ▼

<div class="labu">
<div class="box">
  <div class="ground">
    <div class="axis">
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
    </div>
    <div class="axis">
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
    </div>
    <div class="axis">
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
    </div>
    <div class="axis">
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
    </div>
    <div class="axis">
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
    </div>
    <div class="axis">
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
    </div>
    <div class="axis">
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
    </div>
    <div class="axis">
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
    </div>
    <div class="axis">
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
    </div>
    <div class="axis">
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
    </div>
    <div class="axis">
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
    </div>
    <div class="axis">
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
    </div>
    <div class="axis">
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
    </div>
    <div class="axis">
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
    </div>
    <div class="axis">
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
    </div>
    <div class="axis">
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
    </div>
    <div class="axis">
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
      <div class="cube">
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
        <div class="o"></div>
      </div>
    </div>
  </div>
</div>
</div>
<style>
  .labu *,
.labu *::before,
.labu *::after {
  box-sizing: border-box;
}
.labu {
  display: flex;
  flex-direction: column;
  height: 740px;
  margin: 0;
  line-height: 1.4;
  color: #fff;
  background-color: #607d8b;
}
  .box {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  perspective: 700px;
}
  .ground {
  position: relative;
  width: 20em;
  height: 20em;
  font-size: 3vmin;
  transform: rotateX(60deg);
  transform-style: preserve-3d;
}
.ground:hover * {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.ground:active * {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.axis {
  --basic-transform: rotate(var(--angle));
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  transform: var(--basic-transform) rotateX(0deg);
  transform-style: preserve-3d;
  -webkit-animation: rotate 7.2s linear infinite;
          animation: rotate 7.2s linear infinite;
  -webkit-animation-delay: calc(var(--delay));
          animation-delay: calc(var(--delay));
}
.axis:nth-of-type(1) {
  --angle: -21.1764705882deg;
  --delay: -0.2117647059s;
}
@supports (-moz-appearance: meterbar) and (display: flex) {
  .axis:nth-of-type(1) {
    -webkit-animation-delay: -0.2117647059s;
            animation-delay: -0.2117647059s;
  }
}
.axis:nth-of-type(2) {
  --angle: -42.3529411765deg;
  --delay: -0.4235294118s;
}
@supports (-moz-appearance: meterbar) and (display: flex) {
  .axis:nth-of-type(2) {
    -webkit-animation-delay: -0.4235294118s;
            animation-delay: -0.4235294118s;
  }
}
.axis:nth-of-type(3) {
  --angle: -63.5294117647deg;
  --delay: -0.6352941176s;
}
@supports (-moz-appearance: meterbar) and (display: flex) {
  .axis:nth-of-type(3) {
    -webkit-animation-delay: -0.6352941176s;
            animation-delay: -0.6352941176s;
  }
}
.axis:nth-of-type(4) {
  --angle: -84.7058823529deg;
  --delay: -0.8470588235s;
}
@supports (-moz-appearance: meterbar) and (display: flex) {
  .axis:nth-of-type(4) {
    -webkit-animation-delay: -0.8470588235s;
            animation-delay: -0.8470588235s;
  }
}
.axis:nth-of-type(5) {
  --angle: -105.8823529412deg;
  --delay: -1.0588235294s;
}
@supports (-moz-appearance: meterbar) and (display: flex) {
  .axis:nth-of-type(5) {
    -webkit-animation-delay: -1.0588235294s;
            animation-delay: -1.0588235294s;
  }
}
.axis:nth-of-type(6) {
  --angle: -127.0588235294deg;
  --delay: -1.2705882353s;
}
@supports (-moz-appearance: meterbar) and (display: flex) {
  .axis:nth-of-type(6) {
    -webkit-animation-delay: -1.2705882353s;
            animation-delay: -1.2705882353s;
  }
}
.axis:nth-of-type(7) {
  --angle: -148.2352941176deg;
  --delay: -1.4823529412s;
}
@supports (-moz-appearance: meterbar) and (display: flex) {
  .axis:nth-of-type(7) {
    -webkit-animation-delay: -1.4823529412s;
            animation-delay: -1.4823529412s;
  }
}
.axis:nth-of-type(8) {
  --angle: -169.4117647059deg;
  --delay: -1.6941176471s;
}
@supports (-moz-appearance: meterbar) and (display: flex) {
  .axis:nth-of-type(8) {
    -webkit-animation-delay: -1.6941176471s;
            animation-delay: -1.6941176471s;
  }
}
.axis:nth-of-type(9) {
  --angle: -190.5882352941deg;
  --delay: -1.9058823529s;
}
@supports (-moz-appearance: meterbar) and (display: flex) {
  .axis:nth-of-type(9) {
    -webkit-animation-delay: -1.9058823529s;
            animation-delay: -1.9058823529s;
  }
}
.axis:nth-of-type(10) {
  --angle: -211.7647058824deg;
  --delay: -2.1176470588s;
}
@supports (-moz-appearance: meterbar) and (display: flex) {
  .axis:nth-of-type(10) {
    -webkit-animation-delay: -2.1176470588s;
            animation-delay: -2.1176470588s;
  }
}
.axis:nth-of-type(11) {
  --angle: -232.9411764706deg;
  --delay: -2.3294117647s;
}
@supports (-moz-appearance: meterbar) and (display: flex) {
  .axis:nth-of-type(11) {
    -webkit-animation-delay: -2.3294117647s;
            animation-delay: -2.3294117647s;
  }
}
.axis:nth-of-type(12) {
  --angle: -254.1176470588deg;
  --delay: -2.5411764706s;
}
@supports (-moz-appearance: meterbar) and (display: flex) {
  .axis:nth-of-type(12) {
    -webkit-animation-delay: -2.5411764706s;
            animation-delay: -2.5411764706s;
  }
}
.axis:nth-of-type(13) {
  --angle: -275.2941176471deg;
  --delay: -2.7529411765s;
}
@supports (-moz-appearance: meterbar) and (display: flex) {
  .axis:nth-of-type(13) {
    -webkit-animation-delay: -2.7529411765s;
            animation-delay: -2.7529411765s;
  }
}
.axis:nth-of-type(14) {
  --angle: -296.4705882353deg;
  --delay: -2.9647058824s;
}
@supports (-moz-appearance: meterbar) and (display: flex) {
  .axis:nth-of-type(14) {
    -webkit-animation-delay: -2.9647058824s;
            animation-delay: -2.9647058824s;
  }
}
.axis:nth-of-type(15) {
  --angle: -317.6470588235deg;
  --delay: -3.1764705882s;
}
@supports (-moz-appearance: meterbar) and (display: flex) {
  .axis:nth-of-type(15) {
    -webkit-animation-delay: -3.1764705882s;
            animation-delay: -3.1764705882s;
  }
}
.axis:nth-of-type(16) {
  --angle: -338.8235294118deg;
  --delay: -3.3882352941s;
}
@supports (-moz-appearance: meterbar) and (display: flex) {
  .axis:nth-of-type(16) {
    -webkit-animation-delay: -3.3882352941s;
            animation-delay: -3.3882352941s;
  }
}
.axis:nth-of-type(17) {
  --angle: -360deg;
  --delay: -3.6s;
}
@supports (-moz-appearance: meterbar) and (display: flex) {
  .axis:nth-of-type(17) {
    -webkit-animation-delay: -3.6s;
            animation-delay: -3.6s;
  }
}
@-webkit-keyframes rotate {
  0%, 12% {
    transform: var(--basic-transform) rotateX(0deg);
  }
  38%, 62% {
    transform: var(--basic-transform) rotateX(180deg);
  }
  88%, 100% {
    transform: var(--basic-transform) rotateX(360deg);
  }
}
@keyframes rotate {
  0%, 12% {
    transform: var(--basic-transform) rotateX(0deg);
  }
  38%, 62% {
    transform: var(--basic-transform) rotateX(180deg);
  }
  88%, 100% {
    transform: var(--basic-transform) rotateX(360deg);
  }
}
.cube {
  position: absolute;
  top: 0;
  left: -0.5em;
  width: 1em;
  height: 1em;
  transform-style: preserve-3d;
}
.cube:nth-of-type(2) {
  top: unset;
  bottom: 0;
}
.cube .o {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--o-color);
  transform: var(--o-dir) translateZ(calc(var(--o-offset)));
}
.cube .o:nth-of-type(3n + 0) {
  --o-dir: rotateX(90deg);
  --o-color: #273942;
}
.cube .o:nth-of-type(3n + 1) {
  --o-dir: rotateZ(90deg);
  --o-color: #fafafa;
}
.cube .o:nth-of-type(3n + 2) {
  --o-dir: rotateY(90deg);
  --o-color: #1eb4e6;
}
.cube .o:nth-of-type(odd) {
  --o-offset: .5em;
}
.cube .o:nth-of-type(even) {
  --o-offset: -.5em;
}  
</style>

Tutup

Dipetik dari codepen