A CodePen by peterhry. 3D Axis Data Visualizer Thingy - We were going to use this on an internal project but it got canned. Might be useful for some type of data viz project.

index.html

<div class="viewport"> 
  <div class="model">
    <ul class="axis">
      <li class="plane x">
        <div class="poly"></div>
        <div class="poly"></div>
        <div class="poly"></div>
        <div class="poly"></div>
        <span class="label unselectable left">Min</span>
        <span class="label unselectable right">Max</span>
      </li>
      <li class="plane y">
        <div class="poly"></div>
        <div class="poly"></div>
        <div class="poly"></div>
        <div class="poly"></div>
        <span class="label unselectable left">Min</span>
        <span class="label unselectable right">Max</span>
      </li>
      <li class="plane z">
        <div class="poly"></div>
        <div class="poly"></div>
        <div class="poly"></div>
        <div class="poly"></div>
        <span class="label unselectable left">Min</span>
        <span class="label unselectable right">Max</span>
      </li>
    </ul>
    <ul class="cube bounds">
      <li class="side">
        <ul> 
          <li class="poly"></li>
          <li class="poly"></li>
          <li class="poly"></li>
          <li class="poly"></li>
        </ul>
      </li>
      <li class="side">
        <ul> 
          <li class="poly"></li>
          <li class="poly"></li>
          <li class="poly"></li>
          <li class="poly"></li>
        </ul>
      </li>
      <li class="side">
        <ul> 
          <li class="poly"></li>
          <li class="poly"></li>
          <li class="poly"></li>
          <li class="poly"></li>
        </ul>
      </li>
      <li class="side">
        <ul> 
          <li class="poly"></li>
          <li class="poly"></li>
          <li class="poly"></li>
          <li class="poly"></li>
        </ul>
      </li>
      <li class="side">
        <ul> 
          <li class="poly"></li>
          <li class="poly"></li>
          <li class="poly"></li>
          <li class="poly"></li>
        </ul>
      </li>
      <li class="side">
        <ul> 
          <li class="poly"></li>
          <li class="poly"></li>
          <li class="poly"></li>
          <li class="poly"></li>
        </ul>
      </li>
    </ul>
    </div>
</div>

script.js

$(document).ready(function(){
	
	  var mouseStartX,
	    mouseStartY,
	    rotX = 0,
	    rotY = 0,
	    rotStartX,
	    rotStartY,
	    viewport = $('.viewport'),
	    win = $(window),
	    model = $('.model'),

	  viewport.mousedown(startDrag);
	  viewport.get(0).addEventListener('touchstart', startDrag, false);
	  viewport.get(0).addEventListener('touchend', stopDrag, false);
	  win.mouseup(function(){
	    stopDrag();
	    console.log('mouse up')
	  })
      
	  model.bind('webkitTransitionEnd', function(event){
      axis.css('webkitTransitionDuration', '0');
	  });


	  function startDrag(event) {
	    mouseStartX = event.pageX
	    mouseStartY = event.pageY
      model.css('webkitTransitionDuration', '0');
	    rotStartX = rotX;
	    rotStartY = rotY;
	    win.mousemove(drag);
	    win.get(0).addEventListener('touchmove', drag, false);
	  }
	  
	  function drag(event) {
      rotX = rotStartX + ( ( mouseStartY - event.pageY ) / viewport.outerWidth() * 180 )
      rotY = rotStartY - ( ( mouseStartX - event.pageX ) / viewport.outerWidth() * 180 )
      model.css('webkitTransform', 'rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg)');
      event.preventDefault();
      event.stopPropagation();
      return false;
	  }
	  
	  function stopDrag() {
	    win.unbind('mousemove');
	    win.get(0).removeEventListener('touchmove', drag, false);
	  }
	});

style.css

html, body
{
	width: 100%;
	height: 100%;
}

.container
{
	width: 100%;
	height: 100%;
}

.unselectable
{
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.viewport
{
	width: 100%;
	height: 100%;
	position: relative;
	-webkit-transform-style: preserve-3d;
	-webkit-perspective: 900;
	-webkit-perspective-origin: 50% 20%;
	cursor: move;
}

.viewport *
{
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: visible;
	margin: 0;
}

.model
{
	-webkit-transition: all 1s;
	top: 50%;
	left: 50%;
	position: absolute;
}

.poly { position: absolute; }
.plane { position: absolute; }

.plane .poly
{
	width: 248px;
	height: 248px;
	border: 1px solid rgba(0,0,0,0.8);
}

.plane .poly:nth-child(1) { -webkit-transform: translate3d(0,0,0); }
.plane .poly:nth-child(2) { -webkit-transform: translate3d(0,-250px,0); }
.plane .poly:nth-child(3) { -webkit-transform: translate3d(-250px,-250px,0); }
.plane .poly:nth-child(4) { -webkit-transform: translate3d(-250px,0,0); }
.x { -webkit-transform: rotateX(90deg); }

.x .poly
{
	background: #ffcccc;
	opacity: 0.2;
}

.y { -webkit-transform: rotateZ(90deg); }

.y .poly
{
	background: #ccffcc;
	opacity: 0.2;
}

.z { -webkit-transform: rotateY(90deg); }

.z .poly
{
	background: #ccccff;
	opacity: 0.2;
}

.plane .label
{
	position: absolute;
	top: -8px;
	left: 260px;
}

.plane .label.right
{
	left: auto;
	right: 260px;
}

.cube
{
	position: absolute;
	width: 100px;
	height: 100px;
	-webkit-transform-origin: 0 0 0;
	-webkit-transition: all 0.5s;
}

.cube .side:nth-child(1) { -webkit-transform: translate3d(0, 0, 50px); }
.cube .side:nth-child(2) { -webkit-transform: translate3d(0, 0, -50px); }
.cube .side:nth-child(3) { -webkit-transform: translate3d(0, 0, -50px) rotateY(90deg); }
.cube .side:nth-child(4) { -webkit-transform: translate3d(-100px, 0, -50px) rotateY(90deg); }
.cube .side:nth-child(5) { -webkit-transform: translate3d(0, -50px, 0) rotateX(90deg); }
.cube .side:nth-child(6) { -webkit-transform: translate3d(0, 50px, 0) rotateX(90deg); }

.cube .poly
{
	opacity: 1;
	width: 50px;
	height: 50px;
	background-color: #333;
}

.cube .poly:nth-child(1) { -webkit-transform: translate3d(-50px, -50px, 0); }
.cube .poly:nth-child(2) { -webkit-transform: translate3d(0, -50px, 0); }
.cube .poly:nth-child(3) { -webkit-transform: translate3d(-50px, 0, 0); }
.cube .poly:nth-child(4) { -webkit-transform: translate3d(0, 0, 0); }