body, html { height: 100%; width: 100%; }

body {
    display: -moz-box;
    display: -webkit-box;
    display: box;

    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;

    -moz-box-pack: center;
    -moz-box-align: center;

    -webkit-box-pack: center;
    -webkit-box-align: center;

    box-pack: center;
    box-align: center;
}

.box {
   background: #e3e3e3;
   border: 1px dashed #666;
   margin: auto;
   width: 400px;
   height: 200px;
   cursor: pointer;
   position: relative;

   -webkit-transition: all 1s;
   -moz-transition: all 1s;
   transition: all 1s;
}

.box::after {
   content: '';
   position: absolute;

   width: 70%;
   height: 10px;
   bottombottom: 0;
   left: 15%;

   z-index: -1;

   -webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);
   -moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);
   box-shadow: 0 9px 20px rgba(0,0,0,.4);
}

.box > div {
   background: #e3e3e3;

   position: absolute;
   width: 100%; height: 100%;
   top: 0; left: 0;

   font: 45px/200px bold helvetica, arial, sans-serif;
   text-align: center;

   -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
   transition: all .5s ease-in-out;
}


/* Make sure we see the front side first */
.box > div:first-child {
   position: relative;
   z-index: 2;
}

.box:hover {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   transform: rotateY(180deg);
}

/* Hide the front-side when hovered */
 .box:hover > div:first-child {
    opacity: 0;
 }

 .box:hover div:last-child {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
 }