|
|
Copied To Clipboard!
<!doctype html>
<head>
<title>3d Image Slide</title>
<style>
/* Begin 3d Image Slide */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == */
/* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
/* == Created by: Phe0nix : https://developer.mozilla.org/en-US/profiles/Phe0nix : Creative Commons License == */
/*custom font - Montserrat*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);
/* basic reset */
* {margin:0; padding:0;}
/* forcing the body to take 100% height */
html, body {min-height:100%;}
/* a nice BG */
body {
background:#544; /* fallback color */
background:linear-gradient(#544, #565);
}
/* Thumbnail Background */
.thumb {
width:400px; height:300px; margin:70px auto;
perspective:1000px;
}
.thumb a {
display:block; width:100%; height:100%;
/* double layered BG for lighting effect */
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url("http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/image/i1.png");
/* disabling the translucent black bg on the main image */
background-size:0, cover;
/* 3d space for children */
transform-style:preserve-3d;
transition:all 0.5s;
}
.thumb:hover a {transform:rotateX(80deg); transform-origin:bottom;}
/* bottom surface */
.thumb a:after {
/* 36px high element positioned at the bottom of the image */
content:''; position:absolute; left:0; bottom:0;
width:100%; height:36px;
/* inherit the main BG */
background:inherit; background-size:cover, cover;
/* draw the BG bottom up */
background-position:bottom;
/* rotate the surface 90deg on the bottom axis */
transform:rotateX(90deg); transform-origin:bottom;
}
/* label style */
.thumb a span {
color:white; text-transform:uppercase;
position:absolute; top:100%; left:0; width:100%;
font:bold 12px/36px Montserrat; text-align:center;
/* the rotation is a bit less than the bottom surface to avoid flickering */
transform:rotateX(-89.99deg); transform-origin:top;
z-index:1;
}
/ *shadow */
.thumb a:before {
content:''; position:absolute; top:0; left:0;
width:100%; height:100%;
background:rgba(0, 0, 0, 0.5);
box-shadow:0 0 100px 50px rgba(0, 0, 0, 0.5);
transition:all 0.5s;
/* by default the shadow will be almost flat, very transparent, scaled down with a large blur */
opacity:0.15;
transform:rotateX(95deg) translateZ(-80px) scale(0.75);
transform-origin:bottom;
}
.thumb:hover a:before {
opacity:1;
/* blurred effect using box shadow as filter:blur is not supported in all browsers */
box-shadow:0 0 25px 25px rgba(0, 0, 0, 0.5);
/* pushing the shadow down and scaling it down to size */
transform:rotateX(0) translateZ(-60px) scale(0.85);
}
/* not part of the code below */
.notes{font-family:arial, verdana, tahoma;color:#eee;text-align:center;}
</style>
</head>
<body>
<!-- Container -->
<div class="thumb">
<!-- Image --><a href="#">
<!-- Label --><span>Three-eyed Robot</span></a>
</div>
<div class="notes">Roll mouse cursor over the image to preview the effect.</div>
<br /><br />
<div class="notes">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_251.html">Begin 3d Image Slide Code Snippet</a> page. ]
</div>
</body>
</html>
|
