JSFiddle - React, Tailwind, and code Playground

by sinky

HTML

<div class="flip-container">
    <div class="flipper">
        <div class="front">
           1
        </div>
        <div class="back">
            2
        </div>
    </div>
</div>

<button>flip</button>

CSS

/* entire container, keeps perspective */
 .flip-container {
    perspective: 1000;
}
/* flip the pane when hovered */
.flip-container.flipA .flipper {
    transform: rotateY(900deg);
}

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

.flip-container, .front, .back {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    line-height: 100px;
    text-align:center;
    vertical-align: center;
}
.flip-container .front {
    background: red;
    z-index: 2;
    transform: rotateY(0deg);/* for firefox 31 */
}

.flip-container .back {
    background: blue;
    transform: rotateY(180deg);/* back, initially hidden pane */
}

/* flip speed goes here */
 .flipper {
    transition: 1.6s;
    transform-style: preserve-3d;
    position: relative;
}
/* hide back of pane during swap */
 .front, .back {

}

JavaScript

$('button').click(function() {
	$('.flip-container').toggleClass('flipA');
});