JSFiddle - React, Tailwind, and code Playground

HTML

<header>
	<div id="h1">
		<h1>Title</h1>
	</div>
</header>

CSS

/**********
* CSS
**********/

header h1{
	margin: 0 10px;
	float: left;
	font-family: Monaco, courier, Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 35px;
	-moz-outline-style: none; 
	border:0px;
}

header div#h1{
	width: 150px;
	perspective: 150px;
	-webkit-perspective:150px; 
}
header div#h1 h1{
	position: absolute;
	animation: flip 5s 5;
}
@keyframes flip{
	0%{
		transform: rotateX(0);
		-webkit-transform: rotateX(0);
	}
	25%{
		transform: rotateX(80deg);
	}
	50%{
		transform: rotateX(160deg);
	}
	75%{
		transform: rotateX(280deg);
	}
	100%{
		transform: rotateX(360deg);
	}
}


/**********
* General CSS
**********/

html, 
body{
	margin: 0px; padding: 0px;
	overflow: auto;
	font-family: Helvetica, Arial, sans-serif;
	color: #fff;
	width: 100%;
	height: 100%;
}
body{
	background:#C1C8CB;
}
header{
	position: relative;
	width: 100%;
	height: 35px;
	margin: 0;
	line-height: 35px;
	background: rgba( 0, 0, 0, 0.3 );
	color: #fff;
	box-shadow:0 5px 5px #6E6E6E;/* #6E6E6E */
}