<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");
}
}
This Pen doesn't use any external CSS resources.