<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 id="main"> <div id="header"> <div class="inner"> <div class="efect one"> <h1>THE RED SIDE</h1> </div> <div class="efect two"> <h1>THE GREEN SIDE</h1> </div> </div> </div> </div>

*{ box-sizing: border-box; } #main{ border: 1px solid black; width: 100%; height: auto; padding: 10px; } #header{ height: 500px; border: 1px solid #000; padding: 10px; display: flex; display: -webkit-flex; } .inner{ height: 300px; margin: auto; width: 200px; border: 1px solid green; position: relative; transition: all 0.5s ease 0s; perspective: 300px; } .efect{ position: absolute; height: 100%; width: 100%; text-align: center; transition: all .5s ease 0s; } .one{ background: red; z-index: 1111; backface-visibility: visible; } .inner:hover .one{ transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); backface-visibility: hidden; } .two{ background: green; transform: rotateY(180deg); -moz-transform: rotateY(180deg); backface-visibility: hidden; } .inner:hover .two{ transform: none; backface-visibility: visible; } h1{ color: #fff; }