CSS3 Book Flip For Port

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">
            <p>Back</p>
        </div>
    </div>
</div>

<button class="Btn" onclick="document.querySelector('#flip-toggle').classList.toggle('flip');">Click to flip</button>

CSS

.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    perspective: 1000;
    border: 1px solid #ccc;
    position: relative;
    margin: 0 auto;
}
.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
    -webkit-transform-origin: -100% 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: 2;
}
.back {
    background: tan;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

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

JavaScript

$('.imgBtn').on('click', function() {
    $('#flip-toggle').toggle('flip');
});