Simple CSS3 flip card

gistfile1.html

<div class="flipper">
  <div class="front">Front</div>
  <div class="back">Back</div>
</div>

gistfile2.css

.flipper {
  position: relative;  
  /* styling */
  width: 250px;
  height: 250px;
  
  .back, .front {
    position: absolute;
    top: 0;left:0; right:0; bottom:0;       
    /* styling */
    text-align: center;
    color:#fff;
    line-height:250px;
  }
  
  .front {
    z-index: 2;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -ms-transition: all .55s ease-in-out;
    -moz-transition: all .55s ease-in-out;
    -webkit-transition: all .55s ease-in-out;
    transition: all .55s ease-in-out;        
    /* styling */
    background:blue;
  }
  
  .back {
    z-index: 1;    
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateY(-180deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -o-transition: all .55s ease-in-out;
    -ms-transition: all .55s ease-in-out;
    -moz-transition: all .55s ease-in-out;
    -webkit-transition: all .55s ease-in-out;
    transition: all .55s ease-in-out;    
    /* styling */
    background:red;   
  }  
  
  &:hover {
    .front {
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
    }
  
    .back {
      z-index: 3;
      -webkit-transform: rotateX(0deg) rotateY(0deg);
      -moz-transform: rotateX(0deg) rotateY(0deg);
    }
  }
    
}