<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);
});

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