.panel {           
 margin: 0 auto;            
width: 400px;            
height: 420px;             
position: relative;           
 font-size: .8em;           
 -webkit-perspective: 600px;            
-moz-perspective: 600px;        }        
/* -- make sure to declare a default for every property that you want animated -- */        /* -- general styles, including Y axis rotation -- */       

 .panel .front {            
position: absolute;           
 top: 0;            
z-index: 900;            
width: inherit;            
height: inherit;            
text-align: center;           
-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;       
     
/* -- transition is the magic sauce for animation -- */    
       
 -o-transition: all .4s ease-in-out;            
-ms-transition: all .4s ease-in-out;            
-moz-transition: all .4s ease-in-out;            
-webkit-transition: all .4s ease-in-out;           
 transition: all .4s ease-in-out;        }       

 .panel.flip .front {           
 z-index: 900;            
-webkit-transform: rotateY(180deg);           
 -moz-transform: rotateY(180deg);       
 }        

.panel .back {            
position: absolute;            
top: 0;            
z-index: 800;            
width: inherit;           
height: inherit;            
-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;           
 /* -- transition is the magic sauce for animation -- */            

-o-transition: all .4s ease-in-out;            
-ms-transition: all .4s ease-in-out;           
 -moz-transition: all .4s ease-in-out;            
-webkit-transition: all .4s ease-in-out;            
transition: all .4s ease-in-out;        }       

 .panel.flip .back {           
 z-index: 1000;          
  -webkit-transform: rotateX(0deg) rotateY(0deg);            
-moz-transform: rotateX(0deg) rotateY(0deg);        }