Flip an Element

flip.css

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
  width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}

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

flip.html

<!--
  |--------------------------------------------------------------------------
  | Flip an Element
  |--------------------------------------------------------------------------
  |
  | Gives the ability to "flip" an element to make it look as if it has two
  | faces by clicking on an element with a data-flip="selector" attribute.
  |
  -->

<div class="flip-container" id="myCard">
    <div class="flipper">
        <div class="front">
            <div class="card">
                <img class="card-img-top" src="https://placehold.it/500x100" alt="Card image cap">
                <div class="card-block">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary" data-flip="#myCard">Flip to back</a>
                </div>
            </div>
        </div>
        <div class="back">
            <div class="card text-center">
                <div class="card-header">
                    Featured
                </div>
                <div class="card-block">
                    <h4 class="card-title">Special title treatment</h4>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-primary" data-flip="#myCard">Flip to front</a>
                </div>
                <div class="card-footer text-muted">
                    2 days ago
                </div>
            </div>
        </div>
    </div>
</div>

flip.js

$('[data-flip]').on('click', function() {
	var toFlip = $(this).attr('data-flip');
    $(toFlip).toggleClass('flip');
})

https://jsfiddle.net/somo0qwt/3/