Generated by SassMeister.com.

SassMeister-input-HTML.haml

-# Dudley's CSS 3D Caption Domino 

%div
  %figure 
    %figcaption Autumn, by Lucien Agasse
  
  

SassMeister-input.sass

// ----
// Sass (v3.3.0)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.1)
// Singularity.gs (v1.2.0.rc.6)
// Toolkit (v2.0.0.alpha.10)
// ----

@import compass 
@import compass/css3
@import breakpoint 
@import singularitygs 
@import toolkit
@import toolkit/kickstart 

body  
  font-family: sans-serif

div 
  +perspective(1000px)
  width: 33%
  margin: 3rem auto 0 
  &:hover
    figure
      +transform( rotateX(75deg) translateZ(5vw) ) 
      &:before 
        +box-shadow( 0 0 25px 250x rgba(#000, .5), inset 0 0 250px 250px rgba(#000, .5) )
        +transform( rotateX(-5deg) translateZ(-80px) scale(1)  )
      
  
figure 
  margin: 0
  width: 100%
  height: 29.5vw
  background: url("http://lorempixel.com/people/500/500")
  +transform-origin(center bottom)
  +transform-style(preserve-3d)
  +transition(1s transform) 
  &:before 
    content: ""
    position: absolute 
    top: 0 
    left: 0 
    +box-shadow(0 0 100px 50px rgba(#000,.1), inset 0 0 250px 250px rgba(#000, .1) )
    +transition(1s)
    +transform( rotateX(95deg) translateZ(-80px) scale(0.75) )
    +transform-origin( inherit )
    
  figcaption
    width: 100%
    height: 50px
    position: relative
    top: 29.5vw 
    background-position: bottom
    +background( linear-gradient( rgba(#000, .4), rgba(#000, .4) ), url("http://lorempixel.com/people/500/500") )
    +background-size(100%)
    +transform-origin(center top)
    +transform(rotateX(-89.9deg))
    
    
    color: #fff
    font-size: 1.2vw 
    text-align: center 
    line-height: 3 
    
    
    
    

SassMeister-output.css

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img, video {
  max-width: 100%;
  height: auto;
}

body {
  font-family: sans-serif;
}

div {
  -moz-perspective: 1000px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  width: 33%;
  margin: 3rem auto 0;
}
div:hover figure {
  -moz-transform: rotateX(75deg) translateZ(5vw);
  -ms-transform: rotateX(75deg) translateZ(5vw);
  -o-transform: rotateX(75deg) translateZ(5vw);
  -webkit-transform: rotateX(75deg) translateZ(5vw);
  transform: rotateX(75deg) translateZ(5vw);
}
div:hover figure:before {
  -moz-box-shadow: 0 0 25px 250x rgba(0, 0, 0, 0.5), inset 0 0 250px 250px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 25px 250x rgba(0, 0, 0, 0.5), inset 0 0 250px 250px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 25px 250x rgba(0, 0, 0, 0.5), inset 0 0 250px 250px rgba(0, 0, 0, 0.5);
  -moz-transform: rotateX(-5deg) translateZ(-80px) scale(1);
  -ms-transform: rotateX(-5deg) translateZ(-80px) scale(1);
  -o-transform: rotateX(-5deg) translateZ(-80px) scale(1);
  -webkit-transform: rotateX(-5deg) translateZ(-80px) scale(1);
  transform: rotateX(-5deg) translateZ(-80px) scale(1);
}

figure {
  margin: 0;
  width: 100%;
  height: 29.5vw;
  background: url("http://lorempixel.com/people/500/500");
  -moz-transform-origin: center bottom 50%;
  -ms-transform-origin: center bottom 50%;
  -o-transform-origin: center bottom 50%;
  -webkit-transform-origin: center bottom 50%;
  transform-origin: center bottom 50%;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-transition: 1s transform;
  -o-transition: 1s transform;
  -webkit-transition: 1s transform;
  transition: 1s transform;
}
figure:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  -moz-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.1), inset 0 0 250px 250px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.1), inset 0 0 250px 250px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.1), inset 0 0 250px 250px rgba(0, 0, 0, 0.1);
  -moz-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
  -moz-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
  -ms-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
  -o-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
  -webkit-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
  transform: rotateX(95deg) translateZ(-80px) scale(0.75);
  -moz-transform-origin: inherit 50%;
  -ms-transform-origin: inherit 50%;
  -o-transform-origin: inherit 50%;
  -webkit-transform-origin: inherit 50%;
  transform-origin: inherit 50%;
}
figure figcaption {
  width: 100%;
  height: 50px;
  position: relative;
  top: 29.5vw;
  background-position: bottom;
  background: -moz-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("http://lorempixel.com/people/500/500");
  background: -o-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("http://lorempixel.com/people/500/500");
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("http://lorempixel.com/people/500/500");
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("http://lorempixel.com/people/500/500");
  -moz-background-size: 100%;
  -o-background-size: 100%;
  -webkit-background-size: 100%;
  background-size: 100%;
  -moz-transform-origin: center top 50%;
  -ms-transform-origin: center top 50%;
  -o-transform-origin: center top 50%;
  -webkit-transform-origin: center top 50%;
  transform-origin: center top 50%;
  -moz-transform: rotateX(-89.9deg);
  -ms-transform: rotateX(-89.9deg);
  -o-transform: rotateX(-89.9deg);
  -webkit-transform: rotateX(-89.9deg);
  transform: rotateX(-89.9deg);
  color: white;
  font-size: 1.2vw;
  text-align: center;
  line-height: 3;
}

SassMeister-rendered.html

<div>
  <figure>
    <figcaption>Autumn, by Lucien Agasse</figcaption>
  </figure>
</div>