Bees & Bombs Hypnotic Cube

codespector.css

/**
 * Bees & Bombs Hypnotic Cube
 */

body {  width: 100%;  height: 100vh;  background: #222;}body .wrap {  perspective: 1000px;  width: 200px;  height: 200px;  position: absolute;  left: 50%;  top: 50%;  transform: translateX(-50%) translateY(-50%);}body .wrap .cube {  transform-style: preserve-3d;  position: absolute;  width: 100%;  height: 100%;  animation: rotating 2.25s linear infinite;}@keyframes rotating {  0% {    transform: rotateX(-30deg) rotateY(90deg) translateY(0);  }  100% {    transform: rotateX(-30deg) rotateY(270deg) translateY(-200px);  }}body .wrap .cube .cube__face {  position: absolute;  width: 100%;  height: 100%;  background: #222;  box-shadow: inset 0 0 0 5px #fff;}body .wrap .cube .cube__face:nth-of-type(1) {  transform: rotateY(0deg) rotateX(0deg) translateZ(100px);  background: transparent;  box-shadow: none;  transform-style: preserve-3d;}body .wrap .cube .cube__face:nth-of-type(1):before {  content: '';  position: absolute;  width: 100%;  height: 100%;  background: #222;  transform-origin: 50% 100%;  box-shadow: inset 0 0 0 5px #fff;  animation: flip5 2.25s linear infinite;}@keyframes flip5 {  0% {    transform: rotateX(0deg) translateZ(0px);  }  60% {    transform: rotateX(-180deg) translateZ(0px);  }  100% {    transform: rotateX(-180deg) translateZ(0px);  }}body .wrap .cube .cube__face:nth-of-type(2) {  transform: rotateX(180deg) translateZ(100px);  transform-style: preserve-3d;  box-shadow: none;  background: transparent;}body .wrap .cube .cube__face:nth-of-type(2):before {  content: '';  position: absolute;  width: 100%;  height: 100%;  background: #222;  transform-origin: 50% 0%;  box-shadow: inset 0 0 0 5px #fff;  animation: flip4 2.25s linear infinite;}@keyframes flip4 {  0% {    transform: rotateX(0deg) translateZ(0px);  }  60% {    transform: rotateX(180deg) translateZ(0px);  }  100% {    transform: rotateX(180deg) translateZ(0px);  }}body .wrap .cube .cube__face:nth-of-type(3) {  transform: rotateY(90deg) translateZ(100px) rotateX(0deg);  transform-origin: 50% 100%;  animation: flip2 2.25s linear infinite;}@keyframes flip2 {  0% {    transform: rotateY(90deg) translateZ(100px) rotateX(0deg);  }  20% {    transform: rotateY(90deg) translateZ(100px) rotateX(-45deg);  }  40% {    transform: rotateY(90deg) translateZ(100px) rotateX(-90deg);  }  60% {    transform: rotateY(90deg) translateZ(100px) rotateX(-135deg);  }  80% {    transform: rotateY(90deg) translateZ(100px) rotateX(-180deg);  }  100% {    transform: rotateY(90deg) translateZ(100px) rotateX(-180deg);  }}body .wrap .cube .cube__face:nth-of-type(4) {  transform-origin: 50% 100%;  animation: flip3 2.25s linear infinite;}@keyframes flip3 {  0% {    transform: rotateY(-90deg) translateZ(100px) rotateX(0deg);  }  60% {    transform: rotateY(-90deg) translateZ(100px) rotateX(-180deg);  }  100% {    transform: rotateY(-90deg) translateZ(100px) rotateX(-180deg);  }}body .wrap .cube .cube__face:nth-of-type(5) {  transform: rotateX(90deg) translateZ(100px);  transform-origin: 100% 50%;  animation: flip1 2.25s linear infinite;}@keyframes flip1 {  0% {    transform: translateX(0px) translateY(0px) rotateX(90deg) translateZ(100px) rotateY(0deg);  }  20% {    transform: translateX(147.5px) translateY(50px) rotateX(90deg) translateZ(90px) rotateY(120deg);  }  40% {    transform: translateX(200px) translateY(195px) rotateX(90deg) translateZ(100px) rotateY(200deg);  }  60% {    transform: translateX(140px) translateY(340px) rotateX(90deg) translateZ(100px) rotateY(300deg);  }  80% {    transform: translateX(0px) translateY(400px) rotateX(90deg) translateZ(100px) rotateY(360deg);  }  100% {    transform: translateX(0px) translateY(400px) rotateX(90deg) translateZ(100px) rotateY(360deg);  }}body .wrap .cube .cube__face:nth-of-type(6) {  transform: rotateX(-90deg) translateZ(100px);}

codespector.html

<div class='wrap'>  <div class='cube'>    <div class='cube__face'></div>    <div class='cube__face'></div>    <div class='cube__face'></div>    <div class='cube__face'></div>    <div class='cube__face'></div>    <div class='cube__face'></div>  </div></div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","codespector_bootstrap":"","codespector_jquery":"","page":"all"}