1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8" />
    5.         <meta name="viewport" content="width=device-width, initial-scale=1">
    6.         <title></title>
    7.         <style type="text/css">
    8.             .outer{
    9.                 width: 320px;
    10.                 height: 320px;
    11.                 position: relative;
    12.             }
    13.             .outer>div{
    14.                 position: absolute;
    15.                 transition: all 2s; 
    16.                 backface-visibility: hidden;
    17.             }
    18.             .outer:hover .front{
    19.                 transform: rotateY(180deg);
    20.             }
    21.             .outer:hover .back{
    22.                 transform: rotateY(0deg);
    23.             }
    24.             .back{
    25.                 width: 320px;
    26.                 height: 320px;
    27.                 background-color: blue;
    28.                 transform: rotateY(180deg);
    29.             }
    30.             .front{
    31.                 width: 320px;
    32.                 height: 320px;
    33.                 background-color: red;
    34.             }
    35.         </style>
    36.     </head>
    37.     <body>
    38.             <div class="outer">
    39.                 <div class="back">
    41.                 </div>
    42.                 <div class="front">
    44.                 </div>
    45.             </div>
    46.     </body>
    47. </html>