<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>
@import "compass/css3";

$pastels: (#feffaa, #b2ff90) (#fbc2eb, #a6c1ee) (#84fab0, #8fd3f4)
  (#a1c4fd, #c2e9fb) (#f6d365, #fda085) (#ffecd2, #fcb69f);
$cube-edge: 4em;

body {
  margin: 0;
  height: 100vh;
  perspective: 25em;
  // background-color: linear-gradient();
}

[class*="cube"] {
  position: absolute;
}

.cube {
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  font-size: 8vmin;
  animation: ani 8s ease-in-out infinite;

  &__face {
    margin: -0.5 * $cube-edge;
    width: $cube-edge;
    height: $cube-edge;
    backface-visibility: hidden;
    --i: 0;
    --j: 1;
    transform: rotate3d(var(--i), var(--j), 0, var(--a))
      translateZ(0.5 * $cube-edge);
    // interpolate because Sass apparently has issues with this
    background: #{"linear-gradient(var(--ga), var(--gs))"};

    &:nth-child(n + 5) {
      --i: 1;
      --j: 0;
    }

    @for $f from 0 to 6 {
      &:nth-child(#{$f + 1}) {
        --a: if($f < 4, $f, pow(-1, $f)) * 90deg;
        --ga: random(360) * 1deg;
        --gs: nth($pastels, $f + 1);
      }
    }
  }
}

@keyframes ani {
  from {
    transform: rotateY(2turn) rotateX(2turn);
  }
  to {
    transform: rotateY(1turn) rotateX(1turn);
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.