<h1>3D Image Gallery Concept</h1>
<div class="wrapper">
<!-- canvas 1 -->
<div class="canvas animate-in">
<b class="front"><img src="http://pbltech.org/wiki/images/e/e6/Sample.jpg" /></b>
<b class="bottom"><img src="http://pbltech.org/wiki/images/e/e6/Sample.jpg" /></b>
<b class="left"><img src="http://pbltech.org/wiki/images/e/e6/Sample.jpg" /></b>
</div>
<!-- canvas 2 -->
<div class="canvas animate-in">
<b class="front"><img src="https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg" /></b>
<b class="bottom"><img src="https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg" /></b>
<b class="left"><img src="https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg" /></b>
</div>
<!-- canvas 3 -->
<div class="canvas animate-in">
<b class="front"><img src="http://hamderser.dk/blog/images/clairvoyant/clairvoyant-nature-nature5.jpg" /></b>
<b class="bottom"><img src="http://hamderser.dk/blog/images/clairvoyant/clairvoyant-nature-nature5.jpg" /></b>
<b class="left"><img src="http://hamderser.dk/blog/images/clairvoyant/clairvoyant-nature-nature5.jpg" /></b>
</div>
</div>
<hr />
<h4>Pen by Jordan Richmeier</h4>
/* Useless styling */
body {
text-align: center;
color: #555;
background-color: #C3C3C3;
}
/* scene wrapper */
.wrapper {
position: relative;
perspective: 800;
perspective-origin: 50% 100px;
margin-top: 10px;
padding-left: 100px;
}
/* canvas wrapper */
.canvas {
position: relative;
width: 400px;
height: 500px;
transform-style: preserve-3d;
transition: all 500ms ease-in;
transform: rotateY(20deg) rotateX(60deg) rotateZ(-10deg);
box-shadow: -40px 80px 80px -10px rgba(0,0,0,0.7), inset 0px 0px 15px rgba(0,0,0,1);
cursor: pointer;
margin-right: 30px;
display: inline-block;
}
.canvas:hover {
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
z-index: 5;
}
.canvas.animate-in {
transform: rotateY(30deg) rotateX(88deg) rotateZ(20deg);
}
.canvas img {
position: absolute;
top: 0px;
left: 0px;
opacity: 0.7;
}
b {
position: absolute;
width: 400px;
height: 500px;
display: block;
background-image: url(http://st.depositphotos.com/1019436/2254/v/950/depositphotos_22544613-Canvas-texture-seamless.jpg);
background-size: 100%;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 1);
font-size: 20px;
text-align: center;
line-height: 200px;
color: rgba(0, 0, 0, 0.5);
font-family: sans-serif;
text-transform: uppercase;
transition: all 1s linear;
overflow: hidden;
border-radius: 3px;
}
b.left {
transform: rotateY(270deg) translateX(-1px);
transform-origin: center left;
width: 18px;
}
b.left img {
height: 500px;
opacity: 0.5;
}
b.bottom {
transform: rotateX(90deg) translateY(16px) translateZ(-480px);
transform-origin: bottom center;
height: 18px;
}
b.bottom img {
transform: rotateX(180deg);
width: 100%;
height: 500px;
opacity: 0.5;
left: 0px;
}
b.front {
transform: translateZ(16px);
}
b.front img {
width: 400px;
height: 500px;
top: 0px;
left: 0px;
position: absolute;
}
//animate the images on load
$('.canvas').each(function(index, el) {
window.setTimeout(function() {
$(el).removeClass('animate-in');
}, (100 * index) + 500);
});
This Pen doesn't use any external CSS resources.