div.scene
  each val in [1, 2, 3, 4, 5, 6]
    div(class='cube cube_count_'+val)
      div.cube__face.cube__face--front
      div.cube__face.cube__face--back
      div.cube__face.cube__face--right
      div.cube__face.cube__face--left
      div.cube__face.cube__face--top
      div.cube__face.cube__face--bottom
View Compiled
*,
*:after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

/*--------------- Vars ---------------*/

$animDuration: 2s;
$edgeColor: black;

/*--------------- Scene ---------------*/

.scene {
  width: 200px;
  height: 250px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*--------------- Cube ---------------*/

.cube {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 2;
  transform: rotateX(-36deg) rotateY(45deg);
  transform-style: preserve-3d;
}

  .cube_count_1 {
    z-index: 2;
    left: 50px;
    animation: cube $animDuration 1s ease infinite;
    
    .cube__face {
      animation-delay: 1s;
    }
  }

  .cube_count_2 {
    z-index: 1;
    top: 38px;
    left: -16px;
    animation: cube $animDuration 1.1s ease infinite;

    .cube__face {
      animation-delay: 1.1s;
    }
  }

  .cube_count_3 {
    z-index: 1;
    top: 38px;
    left: 116px;
    animation: cube $animDuration 1.2s ease infinite;

    .cube__face {
      animation-delay: 1.2s;
    }
  }

  .cube_count_4 {
    z-index: 2;
    top: 116px;
    left: -16px;
    animation: cube $animDuration 1.1s ease infinite;

    .cube__face {
      animation-delay: 1.1s;
    }
  }

  .cube_count_5 {
    z-index: 1;
    top: 116px;
    left: 116px;
    animation: cube $animDuration 1.2s ease infinite;

    .cube__face {
      animation-delay: 1.2s;
    }
  }

  .cube_count_6 {
    z-index: 0;
    top: 154px;
    left: 50px;
    animation: cube $animDuration 1.3s ease infinite;

    .cube__face {
      animation-delay: 1.3s;
    }
  }

  .cube__face {
    width: 100px;
    height: 100px;
    position: absolute;
    background: #fff;
    border: 6px solid $edgeColor;
  }

  .cube__face--front  {
    box-shadow: inset -6px -6px 0 0 $edgeColor;
    animation: cube-face-front $animDuration ease infinite;
  }

  .cube__face--right  {
    animation: cube-face-right $animDuration ease infinite;
  }

  .cube__face--back   {
    animation: cube-face-back $animDuration ease infinite;
  }

  .cube__face--left   {
    box-shadow: inset 6px -6px 0 0 $edgeColor;
    animation: cube-face-left $animDuration ease infinite;
  }

  .cube__face--top    {
    box-shadow: inset -6px 6px 0 0 $edgeColor;
    animation: cube-face-top $animDuration ease infinite;
  }

  .cube__face--front  { transform: rotateY(  0deg) translateZ(50px); }
  .cube__face--right  { transform: rotateY( 90deg) translateZ(50px); }
  .cube__face--back   { transform: rotateY(180deg) translateZ(50px); }
  .cube__face--left   { transform: rotateY(-90deg) translateZ(50px); }
  .cube__face--top    { transform: rotateX( 90deg) translateZ(50px); }
  .cube__face--bottom { transform: rotateX(-90deg) translateZ(50px); }

/*--------------- Animation ---------------*/

@keyframes cube {
  0%   { transform: rotateX(-36deg) rotateY(45deg) rotateZ(0) }
  100% { transform: rotateX(-126deg) rotateY(0deg) rotateZ(-45deg) }
}

@keyframes cube-face-front {
  0%   { box-shadow: inset -6px -6px 0 0 $edgeColor }
  100% { box-shadow: inset 0 0 0 0 $edgeColor }
}

@keyframes cube-face-right {
  0%   { box-shadow: inset 0 0 0 0 $edgeColor }
  50%  { box-shadow: inset 0 0 0 0 $edgeColor }
  100% { box-shadow: inset 6px -6px 0 0 $edgeColor }
}

@keyframes cube-face-back {
  0%   { box-shadow: inset 0 0 0 0 $edgeColor }
  100% { box-shadow: inset -6px -6px 0 0 $edgeColor }
}

@keyframes cube-face-left {
  0%   { box-shadow: inset 6px -6px 0 0 $edgeColor }
  100% { box-shadow: inset 0 0 0 0 $edgeColor }
}

@keyframes cube-face-top {
  0%   { box-shadow: inset -6px 6px 0 0 $edgeColor }
  50%  { box-shadow: inset 0 0 0 0 $edgeColor }
  100% { box-shadow: inset 6px -6px 0 0 $edgeColor }
}
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.