<div class="demo">
<div class="tiltWrapper custom" data-maxangle="5" data-tiltdepth="70">
			<a href="#" class="tiltAction">Accessible Link Text</a>
			
			<div class="tiltPanel">
				
				
				<div class="plane level3">

					<div class="foregroundImageSample"></div>
				</div>
				
				<div class="plane level2">
					<div class="middleImageSample"></div>
				</div>
				
				<div class="plane level1">
					<div class="reflection">
						<svg width="130px" height="130px" viewBox="0 0 130 130" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
						    <!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
						    <title>glare</title>
						    <desc>Created with Sketch.</desc>
						    <defs>
						        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-1">
						            <stop stop-color="#FFFFFF" stop-opacity="0.458786232" offset="0%"></stop>
						            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
						        </radialGradient>
						    </defs>
						    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
						        <g id="Desktop-HD" sketch:type="MSArtboardGroup" transform="translate(-426.000000, -322.000000)" fill="url(#radialGradient-1)">
						            <circle id="glare" sketch:type="MSShapeGroup" cx="491" cy="387" r="65"></circle>
						        </g>
						    </g>
						</svg>
					</div>
					<div class="backgroundImageSample"></div>
		

				</div>
			</div>
		</div>
</div>
/* Custom styles that can be altered to suit your implementation */

body {
  background: #f0f0f0;
}

.demo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
}

.tiltWrapper.custom {
	width: 400px;
	height: 625px;
	/*position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);*/
}

.tiltWrapper .backgroundImageSample {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index:1;
	background: url("https://legacy.alnemec.com/temp/interstellar_bg.png");
	background-size: cover;
	background-position: center center;
	border-radius: 4px;
}

.tiltWrapper .middleImageSample {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index:1;
	background: url("https://legacy.alnemec.com/temp/interstellar_middle.png");
	background-size: cover;
	background-position: center center;
}



.tiltWrapper .foregroundImageSample {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index:1;
	background: url("https://legacy.alnemec.com/temp/interstellar_front.png");
	background-size: cover;
	background-position: center center;
}

.custom .level1 video {
	width: auto;
	height: 100%;
}

.custom .level2 {
	
}

/*.custom .level3 {
	text-align: center;
	top: 42%;
	text-shadow: 0px 8px 8px rgba(0,0,0,0.3);
	color: #fff;
	font-family: "Raleway", sans-serif;
	
}*/

.custom .level3 h1 {
	font-weight: 700;
}

/* end of custom styles */



.tiltWrapper {
	-webkit-perspective: 500px; /* Chrome, Safari, Opera */
    perspective: 500px;
    width: 100%;
	height: 100px;
	position: relative;
	transition: 0.1s transform;
  z-index:1;
}

.tiltWrapper.pressed {
	transform: scale(0.98);
  
}

.tiltAction {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index:5;
	text-indent: -100000px;
}

.tiltAction:active, .tiltAction:focus {
	outline: none;
}

.tiltPanel {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index:1;
	border-radius: 3px;
	box-shadow: 0px 18px 65px rgba(0,0,0,0.3);


    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    
    transition: 0.1s transform, 0.2s box-shadow;
    -webkit-transition: 0.1s transform, 0.2s box-shadow;
}

.Safari .tiltPanel {
	transform-origin: 50% 50% 0px !important;
    -webkit-transform-origin: 50% 50% 0px !important;
}

.tiltWrapper.pressed .tiltPanel {
	
	box-shadow: 0px 10px 38px rgba(0,0,0,0.3);
}

.reflection {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 50%;
	bottom: 0px;
	margin-top: -25%;
	margin-left: -25%;
	z-index:4; 
	opacity: 0;
	transition: 0.1s transform, 0.4s opacity;
}

.reflection svg {
	width: 100%;
	height: 100%;
}

.plane {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
  overflow: hidden;
  border-radius: 6px;
	z-index:1;
}


.level1 {
	transform: translateZ(0px);
	overflow: hidden;
	z-index:1;
  
}

.level2 {
  
	transform: translateZ(50px);
	z-index:2;
  width: 90%;
  height: 90%;
  margin: auto;
}

.level3 {
 
	transform: translateZ(100px);
	z-index:3;
  width: 80%;
  height: 80%;
  margin: auto;
}
$(document).ready(function() {
  // Handler for .ready() called.

  /******   Apple TV Tilt Action  *******/

  var lastScrollTop = 0;
  var lastScrollLeft = 0;
  var scrollTimeout;

  $(window).scroll(function() {

    var st = $(this).scrollTop();
    var sl = $(this).scrollLeft();

    if (sl > lastScrollLeft) {
      $(".tiltWrapper").each(function() {

        var rotateelem = $(this).find(".tiltPanel");

        var maxdeg = $(this).attr("data-maxangle");

        if (!maxdeg) {
          //default to 10deg throw when no max angle is defined in attribute.
          var maxdeg = 10;
        }
        
        
        var tiltdepth = $(this).closest(".tiltWrapper").attr("data-tiltdepth");
    
	    if (!tiltdepth) {
			
	      //default to 10deg throw when no max angle is defined in attribute.
	      var tiltdepth = 70;
	    }

        var rotation = "transform: rotateY(-" + maxdeg + "deg); transform-origin: center center 80px; transition: 0.7s transform; -webkit-transform: rotateY(-" + maxdeg + "deg); -webkit-transform-origin: center center 80px; -webkit-transition: 0.7s transform;";
        $(rotateelem).attr("style", rotation);
      });
    } else {
      $(".tiltWrapper").each(function() {

        var rotateelem = $(this).find(".tiltPanel");

        var maxdeg = $(this).attr("data-maxangle");

        if (!maxdeg) {
          //default to 10deg throw when no max angle is defined in attribute.
          var maxdeg = 10;
        }

        var rotation = "transform: rotateY(" + maxdeg + "deg); transform-origin: center center 80px; transition: 0.7s transform; -webkit-transform: rotateY(" + maxdeg + "deg); -webkit-transition: 0.7s transform;";
        $(rotateelem).attr("style", rotation);
      });
    }

    if (st > lastScrollTop) {
      // downscroll code

      $(".tiltWrapper").each(function() {

        var rotateelem = $(this).find(".tiltPanel");

        var maxdeg = $(this).attr("data-maxangle");

        if (!maxdeg) {
          //default to 10deg throw when no max angle is defined in attribute.
          var maxdeg = 10;
        }

        //console.log("scrolling down");
        var rotation = "transform: rotateX(" + maxdeg + "deg); transition: 0.7s transform; -webkit-transform: rotateX(" + maxdeg + "deg); -webkit-transition: 0.7s transform;";
        $(rotateelem).attr("style", rotation);
      });
    } else if (st < lastScrollTop) {
      // upscroll code
      clearTimeout(scrollTimeout);

      $(".tiltWrapper").each(function() {

        var rotateelem = $(this).find(".tiltPanel");

        var maxdeg = $(this).attr("data-maxangle");

        if (!maxdeg) {
          //default to 10deg throw when no max angle is defined in attribute.
          var maxdeg = 10;
        }

        var rotation = "transform: rotateX(-" + maxdeg + "deg); transition: 0.7s transform; -webkit-transform: rotateX(-" + maxdeg + "deg); -webkit-transition: 0.7s transform;";
        $(rotateelem).attr("style", rotation);
      });

    }

    lastScrollTop = st;

    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {

      $(".tiltWrapper").each(function() {
        var rotateelem = $(this).find(".tiltPanel");
        var rotation = "transform: rotateX(0deg) rotateY(0deg); transition: 0.8s transform; -webkit-transform: rotateX(0deg) rotateY(0deg); -webkit-transition: 0.8s transform;";
        $(rotateelem).attr("style", rotation);
      });
    }, 100));

  });

  $("a.tiltAction").mousedown(function(event) {
    var elem = $(this).closest(".tiltWrapper");
    $(elem).addClass("pressed");
  });

  $("a.tiltAction").mouseup(function(event) {
    var elem = $(this).closest(".tiltWrapper");
    $(elem).removeClass("pressed");
  });

  $("a.tiltAction").mouseout(function(event) {
    var reflectionelem = $(this).next().find(".reflection");
    $(reflectionelem).css("opacity", "0");
  });

  $("a.tiltAction").mousemove(function(event) {
    var wrapperelem = $(this).closest(".tiltWrapper");
    
    $(wrapperelem).css("z-index","10");
    
    var rotateelem = $(this).next(".tiltPanel");
    var reflectionelem = $(this).next().find(".reflection");

    
    var tiltdepth = $(this).closest(".tiltWrapper").attr("data-tiltdepth");
    
    if (!tiltdepth) {
		
      //default to 10deg throw when no max angle is defined in attribute.
      var tiltdepth = 70;
    }
    
    
    var maxdeg = $(this).closest(".tiltWrapper").attr("data-maxangle");

    if (!maxdeg) {

      //default to 10deg throw when no max angle is defined in attribute.
      var maxdeg = 10;
    }

    var elemoffset = $(this).offset();
    var elemwidth = $(this).width();
    var elemheight = $(this).height();

    var cursorX = event.pageX - elemoffset.left;
    var cursorY = event.pageY - elemoffset.top;

    if (cursorX < (elemwidth / 2)) {
      var perX = (cursorX / (elemwidth / 2)) - 1;
      var opacityX = 1 - (cursorX / (elemwidth / 2));
      var degX = Math.floor(maxdeg * perX);
      var refX = elemwidth - cursorX;

    } else {
      var perX = 1 - (cursorX / (elemwidth / 2));
      var opacityX = (cursorX / (elemwidth / 2)) - 1;
      var degX = Math.floor(-(maxdeg * perX));
      var refX = elemwidth - cursorX;
    }

    if (cursorY < (elemheight / 2)) {
      var perY = 1 - (cursorY / (elemheight / 2));
      var degY = Math.floor(maxdeg * perY);
      var refY = elemheight - cursorY;
    } else {
      var perY = (cursorY / (elemheight / 2)) - 1;
      var degY = Math.floor(-(maxdeg * perY));
      var refY = elemheight - cursorY;
    }

    var rotation = "transform: rotateX(" + degY + "deg) rotateY(" + degX + "deg); transform-origin: center center "+tiltdepth+"px; -webkit-transform: rotateX(" + degY + "deg) rotateY(" + degX + "deg); -webkit-transform-origin: center center "+tiltdepth+"px;";
    $(rotateelem).attr("style", rotation);

    var reflection = "transform: translate(" + refX + "px, " + refY + "px); -webkit-transform: translate(" + refX + "px, " + refY + "px); opacity: " + opacityX + ";";
    $(reflectionelem).attr("style", reflection);

  });

  $("a.tiltAction").mouseout(function() {
    var rotateelem = $(this).next(".tiltPanel");
    
    var wrapperelem = $(this).closest(".tiltWrapper");
    
    var tiltdepth = $(this).closest(".tiltWrapper").attr("data-tiltdepth");
    
    if (!tiltdepth) {
	   
      //default to 10deg throw when no max angle is defined in attribute.
      var tiltdepth = 70;
    }
    
    $(wrapperelem).css("z-index","");
	if(browser == "Firefox") {
		var rotation = "transform: rotateX(0deg) rotateY(0deg); transform-origin: center center "+tiltdepth+"px; transition: 1.0s transform; -webkit-transform: rotateX(0deg) rotateY(0deg); -webkit-transition: 1.0s transform; -webkit-transform-origin: center center "+tiltdepth+"px;";
	} else {
		var rotation = "transform: rotateX(0deg) rotateY(0deg); transform-origin: center center "+tiltdepth+"px; transition: 1.0s transform; -webkit-transform: rotateX(0deg) rotateY(0deg); -webkit-transition: 1.0s transform; -webkit-transform-origin: center center "+tiltdepth+"px;";
	}
    
    $(rotateelem).attr("style", rotation);
  });
  
  
  
  /*** Browser Detection for handling rendering quirks ****/
  
  var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{
			string: navigator.userAgent,
			subString: "Chrome",
			identity: "Chrome"
		},
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari",
			versionSearch: "Version"
		},
		{
			prop: window.opera,
			identity: "Opera",
			versionSearch: "Version"
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			   string: navigator.userAgent,
			   subString: "iPhone",
			   identity: "iPhone/iPod"
	    },
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]

};
BrowserDetect.init();
  
  var browser = BrowserDetect.browser;
  $("body").addClass(browser);

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js