A CodePen by Dave Taylor.

index.html

<div id="scene"></div>
<script id="world" type="text/x-tmpl">
  <span class="box">
    <i class="front"></i>
    <i class="back"></i>
  </span>
</script>

script.js

var obj = document.getElementById('scene'),
    tmpl = document.getElementById('world').innerText,
    cubes = 10,
    steps = Math.floor(360 / (cubes))
;

function addCube(i, alt){
  var cube = document.createElement('div');
  cube.className = "world";
  cube.innerHTML = tmpl;
  if (alt){
    cube.style.webkitTransform = 'rotateX('+ alt +'deg) rotateZ('+ i*steps +'deg)';
  } else {
    cube.style.webkitTransform = 'rotateX('+ i*steps +'deg)';
  }
  obj.appendChild(cube);
}

for (var i=0;i<cubes;i++){
  addCube(i);
}
for (var i=0;i<cubes;i++){
  addCube(i, 45);
}
for (var i=0;i<cubes;i++){
  addCube(i, 135);
}

document.addEventListener('mousemove', function(e){
  
  var distX = e.clientX / 200,
      distY = e.clientY / 200,
      degY = Math.floor(360 * distX),
      degX = Math.floor(360 * distY)
  ;
  obj.style.webkitTransform = 'rotateY('+ degY +'deg) rotateZ('+ degX +'deg)';
  
});

style.scss

@import "compass";
$boxSize: 14px;
$boxSize--half: $boxSize/2;

body {
  perspective: 1000px;
}
#scene {
  position: relative;
  transform-style: preserve-3d;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  
  top: 20px;
  left: 50%;
}
.world {
  border: dotted 1px #aaa;
  position: absolute;
  top: 0; left: 0;
  width: 200px;
  height: 200px;
  
  border-radius: 50%;
  transform-style: preserve-3d;

}

@keyframes rotate {
  0% {
    transform: rotateY(0deg) rotateX(10deg);
  }
  50% {
    transform: rotateY(180deg) rotateX(180deg);
  }
  100% {
    transform: rotateY(360deg) rotateX(10deg);
  }
}

.box {
  display: block;
  width: $boxSize;
  height: $boxSize;
  position: absolute;
  top: -$boxSize--half;
  left: 50%;
  margin-left: -$boxSize--half;
  
  //animation: rotate 30s infinite;
  transform-style: preserve-3d;

  i:before,
  i:after,
  i {
    display: block;
    background: #999;
    width: $boxSize;
    height: $boxSize;
    position: absolute;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
  }
  i:after,
  i:before {
    content: "";
  }  
}

.front {
  transform: rotateX(90deg) translateZ($boxSize--half);
  
  &:before {
    transform: translateZ(-$boxSize);
  }
  &:after {
    transform: rotateY(90deg) translateZ($boxSize--half) translateX($boxSize--half);
  }
}
i.back {
  transform: rotateY(0deg) translateZ($boxSize--half);
  background: #aaa;
  
  &:before {
    transform: translateZ(-$boxSize);
    background: #ccc;
  }
  &:after {
    transform: rotateY(90deg) translateZ(-$boxSize--half) translateX($boxSize--half);
    background: #bbb;
  }
}