CSS3 Book Flip For Port jQuery

CSS3 Flip

HTML

<div class="flip-container" id="flip-toggle">
    <div class="flipper">
        <div class="front">	<span class="name">Joshua Powell</span>

        </div>
        <div class="back">
        </div>
        <div class="front">	<span class="name">Joshua Powell</span>

        </div>
        <div class="back">
        </div>
    </div>
</div>

<button class="btn" id="prev">Prev</button>
<button class="btn" id="next">Next</button>

CSS

.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    perspective: 1000;
    position: relative;
    margin: 0 auto;
    background: tan;
}
.flipper {
    -webkit-transition: 1.5s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 1.5s;
    -moz-transform-style: preserve-3d;
    transition: 1.5s;
    transform-style: preserve-3d;
    position: relative;
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
}
.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.flip-container, .front, .back {
    width: 320px;
    height: 427px;
}
.front {
    background: brown;
    z-index: 2000;
}
.back {
    background: brown;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.flip-container.next .flipper {
	-webkit-transform: rotateY(-180deg);
}

.flip-container.prev .flipper {
	-webkit-transform: rotateY(0deg);
}

JavaScript

/*$('.btn').on('click', function() {
    var i = $(this).id;
    
    if ($(this).id === '#next') {
        $('#flip-toggle').addClass('next');
    }
    $('#flip-toggle').addClass('next');
});*/

$('#next').on('click', function() {
    var flip = '-webkit-transform: rotateY(-180deg);';
    
    $('.flipper').css(flip);
});