div.flip{
position:relative;
width: 186.4px;
  max-width: 186.4px;
  min-width: 186.4px;
height: 130px; /* Set default height */
-webkit-perspective: 600px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}

div.flip div.rotate{
width: 186.4px;
  max-width: 186.4px;
  min-width: 186.4px;
    -webkit-transform-style: preserve-3d;
  -webkit-transition: all 0.3s linear;
  -moz-transform-style: preserve-3d;
  -moz-transition: all 0.3s linear;
  -o-transform-style: preserve-3d;
  -o-transition: all 0.3s linear;
  -ms-transform-style: preserve-3d;
  -ms-transition: all 0.3s linear;      
  transform-style: preserve-3d;
  transition: all 0.3s linear;
}

div.flip div.rotate > *{ /* Target all children elements */
position:absolute;
width: 186.4px;
  max-width: 186.4px;
  min-width: 186.4px;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}

div.flip div.rotate > div{ /* Target all child DIVs */
-webkit-box-sizing: border-box; /* Specify that any border/ paddings do not add to the DIV's total width */
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px;
background: #eee;
}

div.rotate.x *:nth-child(2){ /* X Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the X axis */
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}

div.flip:hover > div.rotate.x{ /* X Axis rotate specific CSS. Rotate div.rotate.x when mouse rolls over container */
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}