JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<button class="flipbtn" data-flipstate="1"></button>

CSS

.flipbtn { 
	position: relative;
	width: 45px;
	height: 45px;
	transition: rotateY 0.6s;
	transform: rotateY(0deg);
	outline: none;
	border: none;
}

.flipbtn::before, .flipbtn::after {
	backface-visibility: hidden;
	transition: all 0.6s;
    perspective: 100px;
    line-height: 2.4;
    font-weight: bold;
    font-size: 1.3rem;
	width: 100%;
	height: 100%;
	display: inline-block;
    border-radius: 0.5rem;
    color: #fff;
}

.flipbtn::before {
	position: absolute;
	content: attr(data-flipstate);
	top: 0;
	left: 0;
 	background: #FF3A19;
}

.flipbtn[data-flipstate="1"]::before { 
	transform: rotateY(0deg);
	content: "1";
}

.flipbtn[data-flipstate="2"]::before { 
	transform: rotateY(180deg);
	content: "1";
}

.flipbtn[data-flipstate="3"]::before { 
	transform: rotateY(360deg);
  	background: #02C66F;
	content: "3";
}

.flipbtn::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	background: #0288c6;
	content: "2";
}

.flipbtn[data-flipstate="1"]::after {
	transform: rotateY(180deg);
}

.flipbtn[data-flipstate="2"]::after {
	transform: rotateY(360deg);
}

.flipbtn[data-flipstate="3"]::after {
	transform: rotateY(540deg)
}

JavaScript

const btn =  document.querySelector(".flipbtn");

btn.addEventListener("click", (e) => {
	let flipstate = Number(e.target.dataset.flipstate);
	if (flipstate < 3) e.target.dataset.flipstate = flipstate + 1;
	else e.target.dataset.flipstate = 1;
	console.log(e.target.dataset.flipstate);
	
});