3D page

by vovkasolovev

HTML

<script src="http://benalman.com/code/projects/jquery-throttle-debounce/jquery.ba-throttle-debounce.js"></script>
<div class="Container" id="Main-Container">
<div id="container_3d">
  <div class="page_3d">sdfgsdfgsdf</div>
</div>
</div>

CSS

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
    background: black;
}
#Main-Container {
  min-height: 100%;
  position: relative;
  overflow: hidden;
}
#container_3d {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  perspective: 1600px;
}
.page_3d {
  width: 90%;
  height: 90%;
  margin: 20px;
  padding: 20px;
  transform-style: preserve-3d;
  transform-origin: center center;
  backface-visibility: visible;
  transform: rotateX(0deg);
  transition: transform 50ms ease;
  background: white;
}

JavaScript

$(function(){
var doc = $(document),
  body = $("body"),
  docWidth = doc.width(),
  docHeight = doc.height(),
  horiz = 0,
  vert = 0,
  x,
  y,
  range = 10;

/*console.log("docWidth: "+docWidth);
console.log("docHeight: "+docHeight);
console.log("range: "+range);*/

function noTransition() {
  body.removeClass("transition-reset"); //addClass("notransition");
}

function followMouse() {
  horiz = ((range*2)*(x / docWidth))-range;
  vert = -(((range*2)*(y / docHeight))-range);
  $("#container_3d .page_3d").css("transform", "rotateX(" + vert + "deg) rotateY(" +horiz + "deg)");
  noTransition();
}

function reset() {
  body.removeClass("notransition").addClass("transition-reset");
  $("#container_3d .page_3d").css("transform", "");  
}


doc.mousemove(function(e){
  x = e.pageX;
  y = e.pageY;
});

doc.mousemove($.throttle(50,followMouse));

doc.on({
  mouseleave : function(){ reset(); },
  mousedown : function(){ reset(); }
});
  
});