A CodePen by Tim Barkow. Perspective Slides

index.html

<div class="clip">
  <div class="container">
    <div class="leftback">
      <h1>left back</h1>
    </div>  
    <div class="left">
      <h1>left</h1>
    </div>
    <div class="right">
      <h1>right</h1>
    </div>
    <div class="center">
      <h1>center</h1>
    </div>
    <div class="rightback">
      <h1>right back</h1>
    </div>  
  </div>
</div>

script.js

$(function(){

var content = $('.container h1');
var width = $(content).width();

$('.container').on('hover', 
  function(){
    $(content).animate({
      left: '+=' + width
    }, 2000); 
  },
  function(){
    $(content).animate({
      left: 0
    }, 2000); 
  }                
);

var titles = content.map(function(idx, el){ 
  return $(el).html(); 
});
//console.log(titles);
console.log(width);

});

style.scss

@import "compass";
body {
  padding: 20px;
  text-align: center;
}
.clip {
  position: relative;
  width: 400px;
  height: 200px;
  margin: 0 auto;
  border: 1px solid black;
  overflow: hidden;
}

.container {
  z-index: 1;
  position: relative;
  width: 600px;
  height: 200px;
  margin: 0 0 0 -100px;
  background: #eef;
  @include perspective(1000);
  @include transform-style(flat);
  div {
    position: absolute;
    z-index: 2;
    border: 0px solid black;
    width: 200px;
    height: 200px;
    overflow: hidden;
    h1 {
      display: block;
      position: relative;
      left: 0;
      border-bottom: 2px solid orange;
    }
  }
}
.center {
  z-index: 99;
  left: 200px;
  background: #999;
}
.left {
  left: 0;
  background: #faa;
  @include transform(rotateY(-75deg));
  @include transform-origin(100%, 50%);
}
.right {
  right: 0;
  background: #99c;
  @include transform(rotateY(75deg));
  @include transform-origin(0%, 50%);
}  

.leftback {
  left:-52px;
  background: #9c9;
  @include transform-origin(0%, 50%);
  @include translateZ(-200px);
}
.rightback {
  right:-52px;
  background: #9c9;
  @include transform-origin(0%, 50%);
  @include translateZ(-200px);
}