mouse move perspective
HTML
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<section id="home">
<div id="two"> </div>
</section>
CSS
#home {
height: 366px;
width: 366px;
position: relative;
transform-style: preserve-3d;
transform-origin: 50% 50% 0px;
transform: rotateY(380deg) rotateX(320deg);
perspective: 200px;
}
#two {
position: absolute;
top: 33%;
left: 33%;
right: 0%;
width: 33%;
height: 33%;
background-color: rgba(112, 006, 222, 0.7);
transform: translateZ(60px);
}
JavaScript
mousePerspective($(window).width(), $(window).height());
function mousePerspective(w, h) {
$(document).mousemove(function (e) {
var Xmouse = e.pageX;
var Ymouse = e.pageY;
//calc perc
var Xperc = Xmouse / w;
var Yperc = Ymouse / h;
Xpos = Math.floor(Xperc * 100);
Ypos = Math.floor(Yperc * 100);
console.info("X Axis : " + Xpos + " Y Axis : " + Ypos);
Xrev = 100 - Xpos;
Yrev = 100 - Ypos;
$("#home").css({
perspectiveOrigin: Xpos + '% ' + Ypos + '%'
});
});
}