tileJs.min.js

function Tile(d){var g=d;var c="perspective( 800px ) rotateX( 0deg ) rotateY( 0deg ) translateZ( 0px )";var e=function(){g.style.webkitTransformOrigin="50% 50%";g.style.MozTransformOrigin="50% 50%";g.style.msTransformOrigin="50% 50%";g.style.oTransformOrigin="50% 50%";g.style.transformOrigin="50% 50%";g.parentElement.style.webkitTransformStyle="preserve-3d";g.parentElement.style.MozTransformStyle="preserve-3d";g.parentElement.style.msTransformStyle="preserve-3d";g.parentElement.style.oTransformStyle="preserve-3d";g.parentElement.style.transformStyle="preserve-3d";g.style.webkitTransition="-webkit-transform 0.08s";g.style.MozTransition="-moz-transform 0.08s";g.style.msTransition="-ms-transform 0.08s";g.style.oTransition="-o-transform 0.08s";g.style.transition="transform 0.08s";g.style.outline="1px solid transparent";g.style.webkitFontSmoothing="antialiased";g.addEventListener("mousedown",h,false);};var f=function(l,o){var m=g.offsetWidth;var k=g.offsetHeight;var n="perspective( 800px ) ";if(l>m/4&&l<(m/4*3)&&o>k/4&&o<(k/4*3)){n+="rotateX( 0deg ) rotateY( 0deg ) translateZ( -30px )";}else{if(Math.min(l,m-l)<Math.min(o,k-o)){if(l<m-l){n+="rotateX( 0deg ) rotateY( -20deg ) translateZ( 0px )";}else{n+="rotateX( 0deg ) rotateY( 20deg ) translateZ( 0px )";}}else{if(o<k-o){n+="rotateX( 20deg ) rotateY( 0deg ) translateZ( 0px )";}else{n+="rotateX( -20deg ) rotateY( 0deg ) translateZ( 0px )";}}}g.style.webkitTransform=n;g.style.MozTransform=n;g.style.msTransform=n;g.style.oTransform=n;g.style.transform=n;document.addEventListener("mouseup",a,false);};var h=function(m){if(m.offsetX){f(m.offsetX,m.offsetY);return;}var l=b(g);var k=m.pageX-l.x;var n=m.pageY-l.y;f(k,n);};var a=function(k){g.style.webkitTransform=c;g.style.MozTransform=c;g.style.msTransform=c;g.style.oTransform=c;g.style.transform=c;document.removeEventListener("mouseup",a,false);};var j=function(k,l){return parseInt(k.getPropertyValue(l),10);};var b=function(n){var q=0,p=0;var s=true;do{q+=n.offsetLeft;p+=n.offsetTop;var k=getComputedStyle(n,null);var m=j(k,"border-top-width");var o=j(k,"border-left-width");p+=m;q+=o;if(s){var r=j(k,"padding-top");var l=j(k,"padding-left");p+=r;q+=l;}s=false;}while(n=n.offsetParent);return{x:q,y:p};};e();}var tileElements=document.getElementsByClassName("metro-tile");var i;for(i=0;i<tileElements.length;i++){Tile(tileElements[i]);}