How to show different content when rotating a div - html

Question

I'm trying to code a way to rotate a div on mouse hover and show a different content than before.
An example can be seen here: www.possibile.com
And here is my code for what I'm trying to do:
#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 > 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 > p.rear {
display: block;
}
<div id="container">
<div class="rotate">
<p class="front">This is a div to rotate.</p>
<p class="rear">
This is the div rotated.
</p>
</div>
http://jsfiddle.net/wLLLsjLd/1/
The problem with my code is that whenever I hover upon the div, it shows the "rear" p at the beginning of the rotation and not in the end.
Any help?

Answer 1

You can check with the below link.
Fiddle
body {
background: #ecf0f1;
}
ul {
width: 50%;
margin: 120px auto;
}
li {
width: 200px;
height: 200px;
margin-right: 10px;
margin-bottom: 10px;
float: left;
list-style: none;
position: relative;
cursor: pointer;
font-family:'Open Sans';
font-weight: 300;
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
}
div {
color: yellow;
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.front {
z-index: 3;
color: #fff;
text-align: center;
line-height: 210px;
font-size: 20px;
background: #e3e3e3;
}
li:hover > .front{
z-index: 0;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
li:hover > .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.back {
color: #fff;
text-align: center;
line-height: 200px;
font-size: 22px;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #34495e;
}
#box1 {
background: red;
}