"3 d card img"
Bootstrap 3.0.0 Snippet by kiibriia

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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> <script> $(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); }); </script>
/* 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://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://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://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; }

Related: See More


Questions / Comments: