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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif
}

body {
    font-size: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    perspective: 10em;
    perspective-origin: 50% calc(50% - 2em);
    height: 100vh;
    overflow: hidden;
}

.scene {
  position: relative;
  transform-style: preserve-3d;
  animation: rotateScene 30s infinite linear;
}

@keyframes rotateScene {
  to { transform: rotateY(360deg); }
}

.floor {
  position: absolute;
  top: 1em;
  transform: 
    translate(-50%, -50%)
    rotateX(90deg);
  width: 15em;
  height: 15em;
  background-image: radial-gradient(#0000, #000 75%), 
  repeating-conic-gradient(from 45deg, #111 0deg 90deg, #222 90deg 180deg);
  /*radial-gradient(#222, #111);*/
  background-size: 100%, 1em 1em;
}

.cube {
  transform-style: preserve-3d;
  position: absolute;
  width: 2em;
  height: 2em;
  top: -2em;
  left: -1em;
  animation: cubeMove 30s infinite linear alternate forwards;
}

@keyframes cubeMove {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  
  to {
    transform: rotateX(45deg) rotateY(45deg);
  }
}

.floater {
  position: absolute;
  transform-style: preserve-3d;
  animation: floatCube 5s ease-in infinite;
  width: 2em;
  height: 2em;
}

@keyframes float {
  0%,100% {
    transform: translateY(0);
  }
  
  50% {
    transform: translateY(-30%);
    animation-timing-function: ease-out;
  }
}

.front, .back, .left, .right {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #0ff4;
  box-shadow: 0 0 0.5em #000a inset;
  animation: cubeTheme 15s infinite linear;
}

.front {
  transform: translateZ(1em);
}

.right {
  transform: rotateY(90deg) translateZ(1em)
}

.back {
  transform: rotateY(180deg) translateZ(1em)
}

.left {
  transform: rotateY(270deg) translateZ(1em)
}

.top {
  position: absolute;
  width: 2em;
  height: 2em;
  background-color: #0ff7;
  transform: translateY(-50%) rotateX(90deg);
  box-shadow: 0 0 0.5em #000a inset;
  animation: cubeTheme 15s infinite linear;
}

.bottom {
  position: absolute;
  width: 2em;
  height: 2em;
  bottom: 0;
  background-color: #0ff7;
  transform: translateY(50%) rotateX(90deg);
  box-shadow: 0 0 0.5em #000a inset;
  animation: cubeTheme 15s infinite linear;
}

@keyframes cubeTheme {
  0% {
    background-color: #0ff7;
  }
  
  25% {
    background-color: #C6132FA6;
  }
  
  50% {
    background-color: #7213C6A6;
  }
  
  75% {
    background-color: #C65613A6;
  }
  
  100% {
    background-color: #C6B713A6;
  }
}

// No JS yet