<div id="gallery">
      <img src="68/Paysage_de_Chine_3.jpg" alt="Landscape" />
  <img src="68/veggies.jpg" alt="Vegetables" />
  <img src="68/Chewbacca.jpg" alt="Chewbacca" />
</div>

body{
  background:#e0e0e0;
}

#gallery{
  width:100%;
  text-align:center;
  perspective:1000;
  margin-top:20px;
}

.container {
  width: 400px;
  height: 400px;
  display:inline-block;
  margin:0 10px;
}

.sub_container {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
  transition: all 1s;
}

.face {
  position: absolute;
  width: 100%;
  height: 33.3%;
  backface-visibility: hidden;
  overflow:hidden;
}

.front img{
  width: 100%;
  height: 300%;
}

.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  text-align: center;
  background:#ffffff;
}

.top{
  top:0;
  transform-origin:bottom;
  transition:all 1s;
}

.front.top{
  transform: rotateX(-180deg);
}

.back.top{
  transform: rotateY(180deg) rotateX(180deg);
}

.middle{
  top:33.3%;
  transform-origin:top;
  transition: all 1s;
}

.front.middle{
  transform: rotateX(0deg);
}

.back.middle{
  transform: rotateY(180deg) rotateX(0deg);
}

.bottom{
  top:66.6%;
  transform-origin:top;
  transition: all 1s 0.25s;
}

.front.bottom{
  transform: rotateX(179deg);/* 180deg value bug in firefox */
}

.back.bottom{
  transform: rotateY(180deg) rotateX(-180deg);
}

.top img{
  margin-top:0;
}

.middle img{
  margin-top:-33.3%;
}

.bottom img{
  margin-top:-66.6%;
}
/*
.container.active .front.face{
  transform: rotateX(0deg);
}

.container.active .back.face{
  transform: rotateY(180deg) rotateX(0deg);
}

.container.active .sub_container{
  transform: rotateY(0deg) rotateX(0deg);
}
*/

.container:hover .front.face{
  transform: rotateX(0deg);
}

.container:hover .back.face{
  transform: rotateY(180deg) rotateX(0deg);
}

.container:hover .sub_container{
  transform: rotateY(0deg) rotateX(0deg);
}

.label{
  height:33%;
  width:100%;
  color:#ffffff;
  line-height:2.5em;
}

.container:nth-child(1){
  transform-origin:right;
  transform:rotateY(-35deg);
}

.container:nth-child(1) .label{
  background:#005eff;
}

.container:nth-child(2) .label{
  background:#ff9921;
}

.container:nth-child(3) .label{
  background:#31dd96;
}

.container:nth-child(3){
  transform-origin:left;
  transform:rotateY(35deg);
}

window.onload = function(){
  function img2fold(img){
    var container = document.createElement("DIV");
    container.className = "container";
    /*container.onclick = function(){
    if(this.className.indexOf("active") === -1)
      this.className = this.className + " active";
    else
      this.className = this.className.replace(" active","");
    }*/
    var sub_container = document.createElement("DIV");
    sub_container.className = "sub_container";
    var front_face = document.createElement("DIV");
    front_face.className = "front face";
    var back_face = document.createElement("DIV");
    back_face.className = "back face";
    var label = document.createElement("DIV");
    label.className = "label";
    var title = document.createTextNode(img.getAttribute("alt"));
    label.appendChild(title);
    front_face.appendChild(img);
    var front_face_top = front_face.cloneNode(true);
    var front_face_middle = front_face.cloneNode(true);
    var front_face_bottom = front_face.cloneNode(true);
    front_face_top.className = front_face_top.className + " top";
    front_face_middle.className = front_face_middle.className + " middle";
    front_face_bottom.className = front_face_bottom.className + " bottom";
    var back_face_top = back_face.cloneNode(true);
    var back_face_middle = back_face.cloneNode(true);
    var back_face_bottom = back_face.cloneNode(true);
    back_face_top.className = back_face_top.className + " top";
    back_face_middle.className = back_face_middle.className + " middle";
    back_face_middle.appendChild(label);
    back_face_bottom.className = back_face_bottom.className + " bottom";
    sub_container.appendChild(front_face_top);
    sub_container.appendChild(back_face_top);
    sub_container.appendChild(front_face_middle);
    sub_container.appendChild(back_face_middle);
    sub_container.appendChild(front_face_bottom);
    sub_container.appendChild(back_face_bottom);
    container.appendChild(sub_container);
    document.getElementById('gallery').appendChild(container);
  }
  var imgs = document.getElementById('gallery').getElementsByTagName('img');
  var imgs_number = imgs.length;
  for(i=0;i<imgs_number;i++){
    img2fold(imgs[0]);
  }
}