JSFiddle - React, Tailwind, and code Playground

HTML

<div class="animated flip">Settings</div>

CSS

.flip{
    height:500px;
    width:200px;
    background:red;
    color:black;
}
.animated{
	-webkit-animation-fill-mode:both;
	-moz-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	-o-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	-ms-animation-duration:1s;
	-o-animation-duration:1s;
	animation-duration:1s;
}
@-webkit-keyframes flip{
	0%{
		-webkit-transform:perspective(400px) rotateY(0deg);
    }
	100%{
        -webkit-transform:perspective(400px) rotateY(-180deg);
    }
}
@-moz-keyframes flip{
	0%{
		-webkit-transform:perspective(400px) rotateY(0deg);
    }
	100%{
        -webkit-transform:perspective(400px) rotateY(-180deg);
    }
}
@-o-keyframes flip{
	0%{
		-webkit-transform:perspective(400px) rotateY(0deg);
    }
	100%{
        -webkit-transform:perspective(400px) rotateY(-180deg);
    }
}
@keyframes flip{
	0%{
		-webkit-transform:perspective(400px) rotateY(0deg);
    }
	100%{
        -webkit-transform:perspective(400px) rotateY(-180deg);
    }
}
.flip{
	-webkit-backface-visibility:visible !important;
	-webkit-animation-name:flip;
	-moz-backface-visibility:visible !important;
	-moz-animation-name:flip;
	-o-backface-visibility:visible !important;
	-o-animation-name:flip;
	backface-visibility:visible !important;
	animation-name:flip;
}