.panel {
       margin: 0 auto;
       width: 200px;
       height: 200px;  
       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);
   }