<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<figure id="dolls" onclick="unwrap()">
    <img src="brazillian-indian-child.jpg" alt>
    <figure id="dolls-inner1">
      <img src="burmese-child-monk.jpg" alt><figcaption>Faces Around The World <span>Photographs by David Lazar</span></figcaption>
      <figure id="dolls-inner2">
        <img src="egyptian-girl.jpg" alt>
        <figcaption></figcaption>
        <figure id="dolls-inner3">
          <img src="lesotho-girl.jpg" alt>
          <figcaption></figcaption>
        </figure>
      </figure>
    </figure>
  </figure>
@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans);
* {
  box-sizing: border-box;
}

body {
  margin-top: 2rem;
  font-family: 'Alegreya Sans', sans-serif;
  background-color: #333;
}

figure {
  margin: 0;
  display: inline-block;
  transform-origin: left center;
  transform-style: preserve-3d;
  position: relative;
}

#dolls {
  width: 100%;
  font-size: 0;
  perspective: 1500px;
}

#dolls:hover {
  cursor: pointer;
}

#dolls > img {
  width: 25%;
}

#dolls figure {
  transition-duration: 1s;
}

#dolls-inner1 > figcaption {
  border: 2px solid #333;
}

#dolls-inner1 figcaption span {
  display: block;
  font-size: 1rem;
}

figcaption {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(-1px);
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/paper-background.jpg);
  background-size: contain;
  font-size: 1.2rem;
  text-align: center;
  padding-top: .5rem;
}

.rewrap #dolls-inner1 {
  transition-delay: 2s;
}

.rewrap #dolls-inner2 {
  transition-delay: 1s;
}

.rewrap #dolls-inner3 {
  transition-delay: 0s;
}

@media screen and (min-width: 751px) {
  #dolls-inner1 {
    width: 75%;
    transform: rotateY(-175deg);
  }
  #dolls-inner1 figcaption {
    transform: translateZ(-2px) rotateY(180deg);
  }
  #dolls-inner1 > * {
    width: 33.33%;
  }
  #dolls-inner2 {
    width: 50%;
    transform: rotateY(-175deg);
  }
  #dolls-inner2 > * {
    width: 66.66%;
  }
  #dolls-inner3 {
    width: 25%;
    transform: rotateY(-180deg);
  }
  #dolls-inner3 > * {
    width: 266%;
  }
  .unwrap #dolls-inner1 {
    transform: rotateY(-1deg);
  }
  .unwrap #dolls-inner2 {
    transform: rotateY(-1deg);
    transition-delay: 1s;
  }
  .unwrap #dolls-inner3 {
    transform: rotateY(-1deg);
    transition-delay: 2s;
  }
}

@media screen and (max-width: 750px) {
  body {
    min-height: 600px;
  }
  #dolls {
    width: 50%;
    margin: 0 auto;
  }
  figure {
    transform-origin: center top;
    width: 100%;
    display: block;
  }
  #dolls-inner1,
  #dolls > img,
  #dolls-inner1 > *,
  #dolls-inner2 > *,
  #dolls-inner3 > * {
    width: 100%;
  }
  #dolls-inner1 {
    transform: rotateX(175deg);
  }
  #dolls-inner1 > figcaption {
    transform: translateZ(-1px) rotateX(180deg);
  }
  #dolls-inner2 {
    transform: rotateX(177deg);
  }
  #dolls-inner3 {
    transform: rotateX(178deg);
  }
  #dolls-inner1 > figcaption {
    height: 33%;
  }
  #dolls-inner2 > figcaption {
    height: 50%;
  }
  #dolls-inner3 > figcaption {
    height: 100%;
  }
  .unwrap #dolls-inner1 {
    transform: rotateX(-1deg);
  }
  .unwrap #dolls-inner2 {
    transform: rotateX(-1deg);
    transition-delay: 1s;
  }
  .unwrap #dolls-inner3 {
    transform: rotateX(-1deg);
    transition-delay: 2s;
  }
}
var dolls = document.getElementById("dolls");
function unwrap(){ 
if (dolls.classList.length == 0 || dolls.classList.contains("rewrap")) {
	dolls.classList.remove("rewrap");	
	dolls.classList.add("unwrap");
} else {
	dolls.classList.remove("unwrap");
	dolls.classList.add("rewrap");	
}
}

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