JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

/**********
* CSS
**********/
header div#h1{
	width: 150px;
	perspective: 150px;
	-webkit-perspective:150px; 
}
header div#h1 h1{
	position: absolute;
	animation: flip 5s infinite;
    -webkit-animation: flip 5s infinite; /* Safari 4+ */
  -moz-animation:    flip 5s infinite; /* Fx 5+ */
  -o-animation:      flip 5s infinite; /* Opera 12+ */
  animation:         flip 5s infinite; /* IE 10+ */
}
@keyframes flip{
	0%{
		transform: rotate(0);
		-webkit-transform: rotate(0);
	}
	25%{
		transform: rotateX(45deg);
		-webkit-transform: rotateX(45deg);
	}
	50%{
		transform: rotateX(90deg);
		-webkit-transform: rotateX(120deg);
	}
	75%{
		transform: rotateX(120deg);
		-webkit-transform: rotateX(120deg);
	}
	100%{
		transform: rotateX(180);
		-webkit-transform: rotateX(180);
	}
}
@-webkit-keyframes flip{
	0%{
		transform: rotate(0);
		-webkit-transform: rotate(0);
	}
	25%{
		transform: rotateX(45deg);
		-webkit-transform: rotateX(45deg);
	}
	50%{
		transform: rotateX(90deg);
		-webkit-transform: rotateX(120deg);
	}
	75%{
		transform: rotateX(120deg);
		-webkit-transform: rotateX(120deg);
	}
	100%{
		transform: rotateX(180);
		-webkit-transform: rotateX(180);
	}
}

/**********
* 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 */
}
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;
}