title: How to show different content when rotating a div
body: <p>I'm trying to code a way to rotate a <code>div</code> on mouse hover and show a different content than before. </p>
  
  <p>An example can be seen here: <a href="http://www.possibile.com" rel="nofollow">www.possibile.com</a></p>
  
  <p>And here is my code for what I'm trying to do: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    width: 500px;
    height: 500px;
    margin: 0 auto;
  }
  .rotate {
    width: 200px;
    height: 200px;
    margin: 150px;
    background-color: red;
    -webkit-transition: 1s ease-in;
    -moz-transition: 1s ease-in;
    -o-transition: 1s ease-in;
    transition: 1s ease-in;
  }
  .rotate:hover {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  .rotate:hover &gt; p.front {
    display: none;
  }
  p.rear {
    display: none;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
  .rotate:hover &gt; p.rear {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  
    &lt;div class="rotate"&gt;
      &lt;p class="front"&gt;This is a div to rotate.&lt;/p&gt;
      &lt;p class="rear"&gt;
        This is the div rotated.
      &lt;/p&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/wLLLsjLd/1/" rel="nofollow">http://jsfiddle.net/wLLLsjLd/1/</a></p>
  
  <p>The problem with my code is that whenever I hover upon the <code>div</code>, it shows the "rear" p at the beginning of the rotation and not in the end.</p>
  
  <p>Any help?</p>