<div class=container>

          <div class=cube>
              <div class=front></div>
              <div class=back></div>
              <div class='left roll'></div>
              <div class='right roll'></div>
              <div class='top roll'></div>
              <div class='bottom roll'></div>
          </div>

      </div>
*{
    box-sizing: border-box;
}

body{
    background: radial-gradient(circle, #FFF, #999);
}

.container{
    perspective: 1000px;
    perspective-origin: top;
    margin: auto;
    width: 100%;
    height: 1000px;
    position: relative;
}

.cube{
    width: 200px;
    height: 200px;
    margin: auto;
    position: absolute;
    top: 20%;
    left: 40%;
    transform-style: preserve-3d;
}

.cube div{
    display: block;
    width: 200px;
    height: 200px;
    box-shadow: -10px -10px 40px rgba(0, 0, 0, .3) inset,
                 10px 10px 40px rgba(0, 0, 0, .4) inset;
    position: absolute;
    opacity: .9;
    border: 1px solid #090;
}

.front, .back{
  background-color: #909
}

.left, .right{
  background-color: #090
}

.top, .bottom{
  background-color: #099
}

.front{
  transform: translateZ(100px)
}

.back{
  transform: translateZ(-100px)
}

.left{
  transform-origin: left;
  transform: rotateY(90deg) translateX(-100px)
}

.right{
  transform-origin: right;
  transform: rotateY(-90deg) translateX(100px)
}

.top{
  transform-origin: top;
  transform: rotateX(-90deg)  translateY(-100px)
}

.bottom{
  transform-origin: bottom;
  transform: rotateX(90deg)  translateY(100px)
}

@keyframes move{

    0%  {transform: rotateY(0)}

    50% {transform: rotateY(720deg)}
}


.cube{
  animation: move 20s infinite linear;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.