flip2

by jpeter06

HTML

<button onclick="flip();">flip</button><br>
<div class="flipContainer">
 <div class="flipIcon">FL</div>   
    <div class="flipped lower">
        <h1>LOWER</h1>
    </div>
    <div class="flipped upper">
        <h1>UPPER</h1>
    </div>
</div>

CSS

.flipContainer {
  position: relative;
  height: 200px;
  width: 282px;
  margin: 0 auto;
  display:block;
}

.flipContainer > div.flipped {
  position: absolute;
  left: 0; 
  top: 0;
  width: 100%;
  height: 100%;
  background: #463;
  transition: 0.6s ease-in-out;
}

.flipContainer > div.lower {
  background: #642;
  backface-visibility: hidden;
  transform: perspective(800px) rotateY(180deg);
}

.flipContainer > div.upper {
  backface-visibility: hidden;
  transform: perspective(800px) rotateY(0deg);
}

.flipContainer:hover div.lower {
  transform: perspective(800px) rotateY(0);
}

.flipContainer:hover div.upper {
  transform: perspective(800px) rotateY(-179.9deg);
}

/*class flip */
.flipContainer.flip div.lower {
  transform: perspective(800px) rotateY(0);
}

.flipContainer.flip div.upper {
  transform: perspective(800px) rotateY(-179.9deg);
}

/******* ADORNOS *********/
.flipContainer > div.flipIcon{
position:absolute;
display:block;
left:5px;
bottom:5px;
width:20px;height:20px;
z-index:100;
cursor: pointer;
font-size:20px;
color: #999;
    background: transparent;
}

.flipIcon:hover{
    color:orange;
}

JavaScript

function flip(){
    $(".flipContainer").toggleClass("flip");
}