<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<ul>
<li><a href="#"><span title="Home">Home</span></a></li>
<li><a href="#"><span title="About">About</span></a></li>
<li><a href="#"><span title="Service">Service</span></a></li>
<li><a href="#"><span title="Contact">Contact</span></a></li>
</ul>
</div>
body {
margin:0;
padding:0;
background:#262626;
}
ul {
margin:0;
padding:0;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:#fff;
}
ul li {
display:inline-block;
transform-style:preserve-3d;
}
ul li a {
color:#262626;
font-size:16px;
font-familY:arial;
text-transform: uppercase;
text-decoration:none;
font-weight:bold;
display:block;
position:relative;
}
ul li a span {
display:block;
padding:15px 20px;
}
ul li a span:before {
content:attr(title);
position:absolute;
top:0;
left:0;
background:#f30000;
color:#fff;
padding:15px 20px;
transform-style:preserve-3d;
transition:.3s;
transform:rotateX(90deg) translateY(50px);
transform-origin:bottom;
}
ul li a span:hover:before {
transform:rotateX(0deg) translateY(0px);
}
ul li a span:after {
content:attr(title);
position:absolute;
top:0;
left:0;
background:#fff;
color:#262626;
padding:15px 20px;
transform-style:preserve-3d;
transition:.3s;
transform:rotateX(0deg) translateY(0px);
transform-origin:top;
}
ul li a span:hover:after {
transform:rotateX(90deg) translateY(-10px);
}
