<div class="container">
  <div class="cube">
    <div class="face"></div>
    <div class="face"></div>
    <div class="face"></div>
    <div class="face"></div>
    <div class="face"></div>
    <div class="face"></div>
  </div>
  <div class="hexa"></div>
</div>

@import "compass/css3";

$bg: #fbfafb;
$front: #201f20;
$duration: 5s;
$easing: cubic-bezier(.7,0,.3,1);
$step: 100% / 6;

html, body { height: 100%; }
body {
  background: $bg;
  overflow: hidden;
  * { position: absolute; top: 50%; left: 50%; }
}

.container {
  font-size: 180px;
}
$baseRot: rotateX(acos(sqrt(2/3)) * -1rad) rotateY(45deg);
@keyframes cube {
  from, #{$step * 4} { transform: $baseRot rotateX(0) rotateY(0); }
  #{$step * 5} { transform: $baseRot rotateX(90deg) rotateY(0); }
  to { transform: $baseRot rotateX(90deg) rotateY(-90deg); }
}
.cube {
  animation: cube $duration $easing infinite;
  transform-style: preserve-3d;
}
@keyframes facebg {
  from { background-position: 0 1em; }
  #{$step * 4}, to { background-position: 0 0; }
}
.face {
  width: 1em; height: 1em;
  color: $front;
  background: currentColor no-repeat;
  $p1: 25%; $p2: 75%;
  $grad: linear-gradient(45deg, transparent $p1, $bg $p1, $bg $p2, transparent $p2);
  &:nth-child(1) { transform: translate(-50%, -50%) translateZ(.506em); background-image: $grad; animation: facebg $duration steps(1) infinite; }
  &:nth-child(2) { transform: translate(-50%, -50%) rotateY(90deg) translateZ(.5em); }
  &:nth-child(3) { transform: translate(-50%, -50%) rotateX(90deg) translateZ(.5em); }
  &:nth-child(4) { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(.5em); }
  &:nth-child(5) { transform: translate(-50%, -50%) rotateX(-90deg) translateZ(.5em); }
  &:nth-child(6) { transform: translate(-50%, -50%) translateZ(-.5em); }
}
.hexa {
  background: $bg;
  $w: 1em / sqrt(2); $h: 1em / sqrt(6);
  width: $w; height: $h;
  &:before, &:after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    background: inherit;
    transform: translate(-50%, -50%) rotate(60deg);
  }
  &:after { transform: translate(-50%, -50%) rotate(-60deg); }
  
  // rotate around ($x, $y)
  @function r($x, $y, $angle) {
    @return translate($x, $y) rotate($angle) translate(-$x, -$y);
  }
  $hw: .5em / sqrt(2); $hh: .5em / sqrt(6);
  $bt: scale(1.008) translateX(-100%) translateX(-.5px);
  $adj: 2px;
  @keyframes hexa {
    from { transform: $bt r(-$hw, -$hh, 0deg) r($hw, -$hh, 0deg) translateY($adj) r(0, $h, 0deg) translateY(-$adj) r(-$hw, -$hh, 0deg); visibility: visible; }
    #{$step} { transform: $bt r(-$hw, -$hh, -60deg) r($hw, -$hh, 0deg) translateY($adj) r(0, $h, 0deg) translateY(-$adj) r(-$hw, -$hh, 0deg); }
    #{$step * 2} { transform: $bt r(-$hw, -$hh, -60deg) r($hw, -$hh, -60deg) translateY($adj) r(0, $h, 0deg) translateY(-$adj) r(-$hw, -$hh, 0deg); }
    #{$step * 3} { transform: $bt r(-$hw, -$hh, -60deg) r($hw, -$hh, -60deg) translateY($adj) r(0, $h, -60deg) translateY(-$adj) r(-$hw, -$hh, 0deg); }
    #{$step * 4} { transform: $bt r(-$hw, -$hh, -60deg) r($hw, -$hh, -60deg) translateY($adj) r(0, $h, -60deg) translateY(-$adj) r(-$hw, -$hh, -60deg); visibility: hidden; }
    to { transform: $bt r(-$hw, -$hh, 0deg) r($hw, -$hh, 0deg) translateY($adj) r(0, $h, 0deg) translateY(-$adj) r(-$hw, -$hh, 0deg); visibility: hidden; }
  }
  animation: hexa $duration $easing infinite;
}