Hotodogo | Snippets: 3D Cube Animation

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

:root {
  --rx: 0;
  --ry: 0;
}

body {
  font-family: Helvetica, sans-serif;
  background-color: #222;
  color: #fff;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 800px;
  overflow: hidden;
}

.title {
  position: absolute;
  font-size: 1.5em;
  text-shadow: 2px 2px #000;
  padding: 1em;
  text-align: center;
  transition: opacity 0.5s;
}

.hover {
  position: absolute;
  width: calc(100% / 11);
  height: calc(100% / 11);
}
.hover:nth-child(11n+1) {
  left: 0%;
}
.hover:nth-child(n+1):nth-child(-n+11) {
  top: 0%;
}
.hover:nth-child(11n+2) {
  left: 9.0909090909%;
}
.hover:nth-child(n+12):nth-child(-n+22) {
  top: 9.0909090909%;
}
.hover:nth-child(11n+3) {
  left: 18.1818181818%;
}
.hover:nth-child(n+23):nth-child(-n+33) {
  top: 18.1818181818%;
}
.hover:nth-child(11n+4) {
  left: 27.2727272727%;
}
.hover:nth-child(n+34):nth-child(-n+44) {
  top: 27.2727272727%;
}
.hover:nth-child(11n+5) {
  left: 36.3636363636%;
}
.hover:nth-child(n+45):nth-child(-n+55) {
  top: 36.3636363636%;
}
.hover:nth-child(11n+6) {
  left: 45.4545454545%;
}
.hover:nth-child(n+56):nth-child(-n+66) {
  top: 45.4545454545%;
}
.hover:nth-child(11n+7) {
  left: 54.5454545455%;
}
.hover:nth-child(n+67):nth-child(-n+77) {
  top: 54.5454545455%;
}
.hover:nth-child(11n+8) {
  left: 63.6363636364%;
}
.hover:nth-child(n+78):nth-child(-n+88) {
  top: 63.6363636364%;
}
.hover:nth-child(11n+9) {
  left: 72.7272727273%;
}
.hover:nth-child(n+89):nth-child(-n+99) {
  top: 72.7272727273%;
}
.hover:nth-child(11n+10) {
  left: 81.8181818182%;
}
.hover:nth-child(n+100):nth-child(-n+110) {
  top: 81.8181818182%;
}
.hover:nth-child(11n+11) {
  left: 90.9090909091%;
}
.hover:nth-child(n+111):nth-child(-n+121) {
  top: 90.9090909091%;
}

body:active .hover:nth-child(11n+1):hover ~ .cube {
  --ry: -180deg;
}
body:active .hover:nth-child(n+1):nth-child(-n+11):hover ~ .cube {
  --rx: 180deg;
}
body:active .hover:nth-child(11n+2):hover ~ .cube {
  --ry: -144deg;
}
body:active .hover:nth-child(n+12):nth-child(-n+22):hover ~ .cube {
  --rx: 144deg;
}
body:active .hover:nth-child(11n+3):hover ~ .cube {
  --ry: -108deg;
}
body:active .hover:nth-child(n+23):nth-child(-n+33):hover ~ .cube {
  --rx: 108deg;
}
body:active .hover:nth-child(11n+4):hover ~ .cube {
  --ry: -72deg;
}
body:active .hover:nth-child(n+34):nth-child(-n+44):hover ~ .cube {
  --rx: 72deg;
}
body:active .hover:nth-child(11n+5):hover ~ .cube {
  --ry: -36deg;
}
body:active .hover:nth-child(n+45):nth-child(-n+55):hover ~ .cube {
  --rx: 36deg;
}
body:active .hover:nth-child(11n+6):hover ~ .cube {
  --ry: 0deg;
}
body:active .hover:nth-child(n+56):nth-child(-n+66):hover ~ .cube {
  --rx: 0deg;
}
body:active .hover:nth-child(11n+7):hover ~ .cube {
  --ry: 36deg;
}
body:active .hover:nth-child(n+67):nth-child(-n+77):hover ~ .cube {
  --rx: -36deg;
}
body:active .hover:nth-child(11n+8):hover ~ .cube {
  --ry: 72deg;
}
body:active .hover:nth-child(n+78):nth-child(-n+88):hover ~ .cube {
  --rx: -72deg;
}
body:active .hover:nth-child(11n+9):hover ~ .cube {
  --ry: 108deg;
}
body:active .hover:nth-child(n+89):nth-child(-n+99):hover ~ .cube {
  --rx: -108deg;
}
body:active .hover:nth-child(11n+10):hover ~ .cube {
  --ry: 144deg;
}
body:active .hover:nth-child(n+100):nth-child(-n+110):hover ~ .cube {
  --rx: -144deg;
}
body:active .hover:nth-child(11n+11):hover ~ .cube {
  --ry: 180deg;
}
body:active .hover:nth-child(n+111):nth-child(-n+121):hover ~ .cube {
  --rx: -180deg;
}
body:active .cube {
  -webkit-animation-duration: 0s;
          animation-duration: 0s;
}
body:active .title {
  opacity: 0;
}

.checkbox {
  position: absolute;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  top: 1em;
  left: 1em;
  border: 1px solid #fff;
  font-family: inherit;
  padding: 0.5em;
}
.checkbox::before {
  content: "Wireframe";
  color: #fff;
}
.checkbox:checked {
  background-color: green;
}
.checkbox:checked ~ .title {
  color: #222;
  text-shadow: 0 0 2px #fff;
}
.checkbox:checked ~ .cube > div {
  background-color: transparent;
}

.cube {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  z-index: -1;
  transition: transform 0.3s;
  -webkit-animation: cubeRotate 20s linear infinite;
          animation: cubeRotate 20s linear infinite;
}
@-webkit-keyframes cubeRotate {
  from {
    transform: rotateX(0deg) rotateY(720deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(0deg) rotateZ(360deg);
  }
}
@keyframes cubeRotate {
  from {
    transform: rotateX(0deg) rotateY(720deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(0deg) rotateZ(360deg);
  }
}
.cube div {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  border: 2px solid white;
}
.cube .front {
  background-color: #d50000;
  transform: translateZ(100px);
}
.cube .back {
  background-color: #aa00ff;
  transform: translateZ(-100px);
}
.cube .left {
  background-color: #304ffe;
  transform: rotateY(90deg) translateZ(100px);
}
.cube .right {
  background-color: #0091ea;
  transform: rotateY(-90deg) translateZ(100px);
}
.cube .top {
  background-color: #00bfa5;
  transform: rotateX(90deg) translateZ(100px);
}
.cube .bottom {
  background-color: #64dd17;
  transform: rotateX(-90deg) translateZ(100px);
}

CSS Before Head

HTML Head

CSS After Head

JS Before HTML Body

<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>

<input type="checkbox" class="checkbox">
<div class="title">Click and drag to control the cube's rotation:</div>

<div class="cube">
  <div class="front"></div>
  <div class="left"></div>
  <div class="right"></div>
  <div class="back"></div>
  <div class="top"></div>
  <div class="bottom"></div>
</div>

HTML Body

HTML Foot

JS After HTML Body