<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300,600' rel='stylesheet' type='text/css'>
<div class="wrap">
  <div class="pane">
    <h2>One</h2>
    <img src="http://placehold.it/400x300/DED9BB&text=%20">
  </div>
  <div class="pane">
    <h2>Two</h2>
    <img src="http://placehold.it/400x300/DED9BB&text=%20">
  </div>
  <div class="pane">
    <h2>Three</h2>
    <img src="http://placehold.it/400x300/DED9BB&text=%20">
  </div>
</div>

@import "compass/css3";

*{
  box-sizing: border-box;
}

body{
  background: #47453B;
}

img{
  max-width: 100%;
}
.wrap{  
  @include transition(all .1s linear);  
  @media (min-width: 450px) { 
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    perspective: 300px;
    
    &:hover{
      perspective: 3000px;
    }
  }
}

.pane{
  background: tint(#ADA992, 20%);
  text-align: center;
  color: #fff;
  font-family: 'Open Sans', sans-serif;  
  text-transform: uppercase; 
  padding: 20px;
  @include transition(all .1s ease-out);
  
  h2{
    font-weight: 300;
    letter-spacing: 3px;
    border-bottom: 1px solid #fff;
    margin: 0 0 .6em;
  }
  
  img{
    @include transition(all .13s linear);
    transform: scale(1);
  }
  
  @media (min-width: 450px) { 
    &:hover{
      img{
        transform: scale(1.05) translateY(-.6em);
      }
    }
  }
  
  &:first-child,
  &:last-child{
   background: #ADA992;
   transform-style: preserve-3d;
  };
  
  @media (min-width: 450px) { 

    &:first-child{
      transform-origin: right top;
      transform: translateY(44px) rotateY(-11deg);
    }

    &:last-child{
      transform-origin: left top;
      transform: translateY(44px) rotateY(11deg); 
    }

    &:nth-child(2){
      transform: translateY(44px);
    }
  
  }
  
  @media (min-width: 800px) {
    &:first-child,
    &:last-child{
      transform: translateY(44px) rotateY(0deg);
    }
  }
}