Experimental rotator lifted from http://www.clicktorelease.com/code/css3dclouds/

jsbin.uxosuf.jade

#viewport
  #world
  
    .speaker

      #face-1.face("data-x" = "250", "data-y" = "0", "data-z" = "0")
        a(href = "#")
          img(src = "http://lorempixel.com/500/500/animals/")

    .speaker
      #face-2.face("data-x" = "-250", "data-y" = "0", "data-z" = "0")
        a(href = "#")
          img(src = "http://lorempixel.com/500/500/animals/")

    .speaker
      #face-3.face("data-x" = "0", "data-y" = "0", "data-z" = "250")
        a(href = "#")
          img(src = "http://lorempixel.com/500/500/animals/")

    .speaker
      #face-4.face("data-x" = "0", "data-y" = "0", "data-z" = "-250")
        a(href = "#")
          img(src = "http://lorempixel.com/500/500/animals/")

jsbin.uxosuf.js

var world = document.getElementById("world"),
  //viewport = document.getElementById('viewport'),
  face1 = document.getElementById("face-1"),
  face2 = document.getElementById('face-2'),
  face3 = document.getElementById('face-3'),
  face4 = document.getElementById('face-4'),
  worldXAngle = 0,
  worldYAngle = 0,
  d = 0;


function updateView() {
  var t = 'translateZ( ' + d + 'px ) rotateX( -40deg) rotateY( ' + worldYAngle + 'deg)';

  world.style.webkitTransform = t;
  world.style.MozTransform = t;
  world.style.oTransform = t;
}


function updateFace(face) {
  var t = 'translateX( ' + face.dataset.x + 'px ) translateY( ' + face.dataset.y + 'px ) translateZ( ' + face.dataset.z + 'px ) rotateY( ' + ( - worldYAngle ) + 'deg ) rotateX( 40deg ) scale(1)';

  face.style.webkitTransform = t;
  face.style.MozTransform = t;
  face.style.oTransform = t;
}


function updateWorld() {

  updateView();
  updateFace(face1);
  updateFace(face2);
  updateFace(face3);
  updateFace(face4);

}


/*
  Event listener to transform mouse position into angles 
  from -180 to 180 degress, both vertically and horizontally
*/
window.addEventListener( 'mousemove', function( e ) {
  worldYAngle = -( 0.5 - ( e.clientX / window.innerWidth ) ) * -360;
  worldXAngle = ( 0.5 - ( e.clientY / window.innerHeight ) ) * -360;

  updateWorld();
});



updateWorld();

jsbin.uxosuf.less

#viewport {
  min-height: 1000px;
  bottom: 0;
  left: 0;
  //overflow: hidden;
  -webkit-perspective: 600;
  perspective: 600; 
  position: relative;
  right: 0;
  top: 0;
}
#world {
  top: 100px;
  height: 512px;
  left: 50%;
  margin-left: -256px;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: 512px;
}

.face {
  width: 250px;
  height: 250px;
  left: 50%;
  top: 50%;
  margin-left: -125px;
  margin-top: -125px;
  position: absolute;
  overflow: hidden;
  border-radius: 100%;
  border: none;

  img {
    position: absolute;
    left: 0px;
    left: 0px;
    width: 250px;
    height: 250px;
    border-radius: 100%;
  }
}