Document // source https://jsbin.com/zugoqo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="" href="app.css">
    <title>Document</title>
<style id="jsbin-css">
body {
    overflow: hidden;
    background-color: darkgray;
    width: 100%;
    height: 100vh;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#container {
    outline: 1px solid transparent;
    width: 800px;
    height: 600px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    background: url('https://apps.wpsites05.ft.com/wp-content/uploads/sites/6/2014/07/ipad_homepage_p_ipadmini_white_angle1-1030x533.png') no-repeat;
    background-size: contain;
}

.figure {
    outline: 1px solid transparent;
    width: 142px;
    height: 483px;
    /*background: url('https://zadesigns.com/tron/tron.png') no-repeat;*/
    position: absolute;
    transform: translateZ(120px);
    -moz-transform: translateZ(120px);
    -webkit-transform: translateZ(120px);
    bottom: 0px;
    left: 50%;
    margin-left: -71px;
}

.gsap {
    outline: 1px solid transparent;
    width: 396px;
    height: 128px;
    /*background: url('https://zadesigns.com/tron/GSAP.png') no-repeat;*/
    position: absolute;
    transform: translateZ(60px);
    -moz-transform: translateZ(60px);
    -webkit-transform: translateZ(60px);
    top: 30px;
    left: 50%;
    margin-left: -198px;
}

.tagline {
    width: 500px;
    outline: 1px solid transparent;
    position: absolute;
    transform: translateZ(80px);
    -moz-transform: translateZ(80px);
    -webkit-transform: translateZ(80px);
    bottom: 0px;
    left: 50%;
    margin-left: -280px;
    padding-left: 30px;
    padding-right: 30px;
    background: rgba(0, 0, 0, 0.6);
    font-family: Arial, Helvetica, "Helvetica-Neue", san-serif;
    color: #FFF;
    font-size: 30px;
    line-height: 60px;
    text-align: center;
    color: #F9E48B;
    text-transform: uppercase;
}
</style>
</head>

<body>

<div id="container">
        <div class="gsap"></div>
        <div class="figure"></div>
        <div class="tagline">
            GSAP 3D Parallax Demo
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/tweenlite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/cssplugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/scrolltoplugin.min.js"></script>
    <script src="app.js"></script>
<script id="jsbin-javascript">
$(document).ready(function() {

var request = null;
    var mouse = {
        x: 0,
        y: 0
    };
    var cx = $('#container').width() / 2;
    var cy = $('#container').height() / 2;

$('#container').mousemove(function(event) {
        mouse.x = event.pageX - this.offsetLeft;
        mouse.y = event.pageY - this.offsetTop;

//console.log(mouse, event.pageX, this.offsetLeft);
        console.log(mouse, event.pageY, this.offsetTop);

cancelAnimationFrame(request);
        request = requestAnimationFrame(update);
    });

function update() {

// dx = mouse.x - cx;
        // dy = mouse.y - cy;

dx = cx - mouse.x;
        dy = cy - mouse.y;

tiltx = (dy / cy);
        tilty = -(dx / cx);
        radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2));
        degree = (radius * 10);
        TweenLite.to("#container", 1, {
            transform: 'translate3d(' + dx / 10 + 'px,' + dy / 10 + 'px, 0px)',
            //transform: 'rotate3d(' + tiltx / 2 + ', ' + tilty / 2 + ', 0, ' + degree + 'deg)',
            ease: Power2.easeOut
        });

//console.log('translateX(-' + dx / 4 + 'px) translateY(-' + dy / 2 + 'px)', );
    }

$(window).resize(function() {
        cx = window.innerWidth / 2;
        cy = window.innerHeight / 2;
    });
});
</script>

var request = null;
    var mouse = {
        x: 0,
        y: 0
    };
    var cx = $('#container').width() / 2;
    var cy = $('#container').height() / 2;

$('#container').mousemove(function(event) {
        mouse.x = event.pageX - this.offsetLeft;
        mouse.y = event.pageY - this.offsetTop;

//console.log(mouse, event.pageX, this.offsetLeft);
        console.log(mouse, event.pageY, this.offsetTop);

cancelAnimationFrame(request);
        request = requestAnimationFrame(update);
    });

function update() {

// dx = mouse.x - cx;
        // dy = mouse.y - cy;

dx = cx - mouse.x;
        dy = cy - mouse.y;

//console.log('translateX(-' + dx / 4 + 'px) translateY(-' + dy / 2 + 'px)', );
    }

$(window).resize(function() {
        cx = window.innerWidth / 2;
        cy = window.innerHeight / 2;
    });
});</script></body>

</html>

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenLite.min.js to https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/tweenlite.min.js

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/CSSPlugin.min.js to https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/cssplugin.min.js

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/ScrollToPlugin.min.js to https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/scrolltoplugin.min.js

https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenLite.min.js

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/CSSPlugin.min.js

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/ScrollToPlugin.min.js