Inertia

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title></title>
    <style>
    html, body {height:100%;}

html {overflow:hidden;}

body {margin:auto;}

#foo {
      width:100%; height:100%; overflow:auto;
      background:url(https://dl.dropbox.com/s/sw0qqg0j0qq8xng/grid.png?dl=1);
      cursor:move;
      -webkit-transform:translateZ(0,0,0);-moz-transform:translateZ(0,0,0);-ms-transform:translateZ(0,0,0);transform:translateZ(0,0,0);
      -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
    }

html {-webkit-perspective:450;-moz-perspective:450px;-ms-perspective:450;perspective:450;}
    body {width:100%; height:100%; position:relative;}
    body, body * {-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;}
    .cube,
    .cube > .top,
    .cube > .front,
    .cube > .right,
    .cube > .back,
    .cube > .left,
    .cube > .bottom {display:block; width:5em; height:5em;}
    .cube {position:relative;}
    .cube > .top,
    .cube > .front,
    .cube > .right,
    .cube > .back,
    .cube > .left,
    .cube > .bottom {position:absolute; -webkit-backface-visibility:visible;-moz-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;}
    .cube > .top    {-webkit-transform:rotateX( 90deg) translateZ( 2.5em);               -moz-transform:rotateX( 90deg) translateZ( 2.5em);               -ms-transform:rotateX( 90deg) translateZ( 2.5em);               transform:rotateX( 90deg) translateZ( 2.5em);}
    .cube > .front  {-webkit-transform:                translateZ( 2.5em);               -moz-transform:                translateZ( 2.5em);               -ms-transform:                translateZ( 2.5em);               transform:                translateZ( 2.5em);}
    .cube > .right  {-webkit-transform:rotateY( 90deg) translateZ( 2.5em);               -moz-transform:rotateY( 90deg) translateZ( 2.5em);               -ms-transform:rotateY( 90deg) translateZ( 2.5em);               transform:rotateY( 90deg) translateZ( 2.5em);}
    .cube > .back   {-webkit-transform:rotateY(180deg) translateZ( 2.5em);               -moz-transform:rotateY(180deg) translateZ( 2.5em);               -ms-transform:rotateY(180deg) translateZ( 2.5em);               transform:rotateY(180deg) translateZ( 2.5em);}
    .cube > .left   {-webkit-transform:rotateY(-90deg) translateZ( 2.5em);               -moz-transform:rotateY(-90deg) translateZ( 2.5em);               -ms-transform:rotateY(-90deg) translateZ( 2.5em);               transform:rotateY(-90deg) translateZ( 2.5em);}
    .cube > .bottom {-webkit-transform:rotateX(-90deg) translateZ( 2.5em) rotate(180deg);-moz-transform:rotateX(-90deg) translateZ( 2.5em) rotate(180deg);-ms-transform:rotateX(-90deg) translateZ( 2.5em) rotate(180deg);transform:rotateX(-90deg) translateZ( 2.5em) rotate(180deg);}

.cube > .top,
    .cube > .front,
    .cube > .right,
    .cube > .back,
    .cube > .left,
    .cube > .bottom {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box; border:1px solid; background-color:rgba(255,255,255,.8);}

#my3 {font-size:140%; position:fixed; left:50%; top:50%; margin-left:-2.5em; margin-top:-2.5em; -webkit-transform:translateZ(5em);-moz-transform:translateZ(5em);-ms-transform:translateZ(5em);transform:translateZ(5em);}
    </style>
  </head>
  <body>
    <div id="foo"></div>

var bgx = 0,
        bgy = 0;
    $(function () {
      (function () {
        var  x = 0,  y = 0,
            vx = 0, vy = 0,
            ax = 0, ay = 0,
            friction = .025;

var ex = 0,
            ey = 0;

var looop = new Loop(function (t, t0) {
          if (!t0) {
            return;
          }
          var dt = (t - t0) / 1000; // seconds
          //console.log(dt);

var dx  = ex - x,
              dy  = ey - y,
              dt2 = Math.pow(dt, 2);
          ax = dx / dt2,
          ay = dy / dt2;

vx += ax * dt;
          vy += ay * dt;
          vx *= friction;
          vy *= friction;

x += vx * dt;
          y += vy * dt;

//
          bgx = x;
          bgy = y;
          $('#foo').css('background-position', Math.round(bgx) + "px " + Math.round(bgy) + "px");

//
          my3.rx = y;
          my3.ry = -x;
          $('#my3').css('transform', 'translateZ(5em) rotateX(' + my3.rx + 'deg) rotateY(' + my3.ry + 'deg)');

// STOP!
          if (Math.sqrt(vx*vx + vy*vy) < 1) {
            //return false;
          }
        });

$(window).mousewheel(function(event, delta, deltaX, deltaY) {
          ex += -deltaX * 5;
          ey += deltaY * 5;

looop.start();
        });

// OK
        (function () {
          var prevPageX,
              prevPageY;

$('#foo')
            .hammer({drag_min_distance: 0})
            .on({
              dragstart: function (e) {
                prevPageX = (e.gesture && e.gesture.center || e.originalEvent).pageX;
                prevPageY = (e.gesture && e.gesture.center || e.originalEvent).pageY;
              },
              drag: function(e) {
                var pageX = (e.gesture && e.gesture.center || e.originalEvent).pageX,
                    pageY = (e.gesture && e.gesture.center || e.originalEvent).pageY;

ex += (pageX - prevPageX);
                ey += (pageY - prevPageY);

prevPageX = pageX;
                prevPageY = pageY;

looop.start();
              },
              dragend: function(e) {
                prevPageX = void 0;
                prevPageY = void 0;
              }
            });
        }());

// OK
        /*$(window).mousemove(function (e) {
          ex = e.pageX;
          ey = e.pageY;

looop.start();
        });*/
      }())
    });
    </script>

ga('create', 'UA-13126287-1', 'abernier.name');
ga('send', 'pageview');
</script>

</body>
</html>

Modified http://code.jquery.com/jquery-latest.min.js to a secure url

Updated missing url https://rawgithub.com/EightMedia/hammer.js/v1.0.5/dist/hammer.js to https://rawgithub.com/eightmedia/hammer.js/v1.0.5/dist/hammer.js

Updated missing url https://rawgithub.com/EightMedia/hammer.js/v1.0.5/dist/jquery.hammer.js to https://rawgithub.com/eightmedia/hammer.js/v1.0.5/dist/jquery.hammer.js

Updated missing url https://rawgithub.com/paulirish/1579671/raw/rAF.js to https://rawgithub.com/paulirish/1579671/raw/raf.js

https://code.jquery.com/jquery-latest.min.js

https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js

https://rawgithub.com/EightMedia/hammer.js/v1.0.5/dist/hammer.js

https://rawgithub.com/EightMedia/hammer.js/v1.0.5/dist/jquery.hammer.js

https://rawgithub.com/paulirish/1579671/raw/rAF.js

https://rawgithub.com/abernier/3225993/raw/loop.js

https://rawgithub.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js