If a user want to flip his content or image on mouse hover using css3. He can use the code below.

In below example, we have two sided view.

HTML :

<div id="container">
        <div id="card" class="shadow">
          <div class="front face">
            <p>This is nice for exposing more information about an image12.</p>
            <p>Any content can go here12.</p>
          </div>
          <div class="back face center">
            <p>This is nice for exposing more information about an image.</p>
            <p>Any content can go here.</p>
          </div>
        </div>
    </div>

CSS :

#container {
          position: relative;
          margin: 10px auto;
          width: 450px;
          height: 281px;
          z-index: 1;
          perspective: 1000;
        }
        #card {
          width: 100%;
          height: 100%;
          transform-style: preserve-3d;
          transition: all 0.5s linear;
        }
        #container:hover #f1_card {
          transform: rotateY(180deg);
          box-shadow: -5px 5px 5px #aaa;
        }
        .face {
          position: absolute;
          width: 100%;
          height: 100%;
          backface-visibility: hidden;
        }
        .face.back {
          display: block;
          transform: rotateY(180deg);
          box-sizing: border-box;
          padding: 10px;
          color: white;
          text-align: center;
          background-color: #aaa;
        }