GSAP 3D parallax Demo

3D rotation based on mouse position of a series of square images to create a parallax effect

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.8.3/TweenMax.min.js"></script>
<div class="container sel">
<H1>Ett</H1>
</div>
<div class="container">
<H1>TVĂ…</H1>
</div>

SCSS

body 
{
 
 
}
.container h1{
  color:#FFF;
}
.container 
{
  outline: 1px solid transparent;
 
 
  height: 150px;
  width: 150px;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/50628/background.jpg') no-repeat;
}

JavaScript

$(function () {
    var $window = $(window),
        $body = $('body');
    $('.container').on('loaded mousemove', function (event) {
        cx = Math.ceil($body.width() / 2.0);
        cy = Math.ceil($body.height() / 2.0);
        dx = event.pageX - cx;
        dy = event.pageY - cy;
        tiltx = (dy / cy);
        tilty = -(dx / cx);
        radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2));
        degree = (radius * 20);

        TweenMax.set($body, {
            perspective: '1000px',
            transformStyle: "preserve-3d"
        });
        TweenMax.set($(this), {
            transformStyle: "preserve-3d",
            z: '0px',
            transform: 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)'
        });
      
       
    }).trigger('loaded');
    if (event.name = 'loaded') {
        TweenMax.set(".container", {
            transform: 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)'
        });
    }
});