A demo of jQuery animation (3D flip)

jQuery, CSS and HTML

<!DOCTYPE html>
<html>
<head>
 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="js/flip/flip.js"></script>

    <style type="text/css">
      .card {
        width: 500px;
        height: 200px;
        margin: 20px;
      }
      .front, .back, .other-front, .other-back {
        border: 2px gray solid;
        padding: 10px;
      }
      .front, .other-front {
        background-color: #408080;
        color: #fff;
      }
      .back, .other-back {
        background-color: #C6E3E3;
      }
    </style>

</head>

<body>
   <div id="card-flip-animation" class="card">
      <div class="other-front">
          Front: The front content will display first. Palce front content here. The front content will display first. Palce front content here. The front content will display first. Palce front content here. The front content will display first. Palce front content here.
      </div>
      <div class="other-back">
          <a href="https://google.com">link</a>
          Back: The back content will display as you bring mouse over this div element. The back content will display as you bring mouse over this div element. The back content will display as you bring mouse over this div element.
      </div>
    </div>



    <script type="text/javascript">
    $(function(){
      $("#card-flip-animation").flip({
        axis: "y", // y or x
        reverse: false, // true and false
        trigger: "hover", // click or hover
        speed: '1000',
        front: $('.other-front'),
        back: $('.other-back'),
        autoSize: false
      });
 
    });
    </script>
</body>
</html>

Front: The front content will display first. Palce front content here. The front content will display first. Palce front content here. The front content will display first. Palce front content here. The front content will display first. Palce front content here.

link Back: The back content will display as you bring mouse over this div element. The back content will display as you bring mouse over this div element. The back content will display as you bring mouse over this div element.