gistfile1.scss

.slide-container {
  @include transform-style(preserve-3d);
  @include perspective(2000px);

  .slide {
    opacity: 0;
    @include transition(transform 800ms, opacity 800ms);
    
    &.current { opacity: 1; @include transform(rotateY(0deg)); }
    &.left { @include transform(rotateY(-90deg) translateZ(800px)); }
    &.top { @include transform(rotateY(180deg) translateZ(800px)); }
    &.right { @include transform(rotateY(90deg) translateZ(800px)); }
  }
}

gistfile2.js

$(function __initSlider() {
    var $nextLink = $('.slide-nav.next'),
        $prevLink = $('.slide-nav.prev'),
        $slides = $('.slide'),
        positions = [ 'current', 'right', 'top', 'left' ],
        currIdx = 0;
    
    function assignPositionClasses(currIdx) {
        // assign new classes to each slide according to currIdx
        $slides.each(function(index) {
            $(this).removeClass('current right top left')
                .addClass(positions[(4 + index-currIdx)%4]);
        });
    }
    
    function handleNavigation(offset, ev) {
        ev.preventDefault(); ev.stopImmediatePropagation();
    
        currIdx = (currIdx+offset)%4;
        assignPositionClasses(currIdx);
    }
    
    $nextLink.on('click', $.proxy(handleNavigation, null, 1));
    $prevLink.on('click', $.proxy(handleNavigation, null, -1));
});

gistfile3.html

<div class="slide-container">
    <div class="slide current"><!-- ... --></div>
    <div class="slide right"><!-- ... --></div>
    <div class="slide top"><!-- ... --></div>
    <div class="slide left"><!-- ... --></div>
</div>