There are many ways to create the flip effect with jQuery however here is an example of creating a 3D flip animation with CSS3 and HTML.

How will it look like?

The effect below shows the type of 3D flip animation we are going to create.

Just hover the mouse over the box below to see the effect

The HTML code

Here goes the HTML structure to accomplish the two-sided effect

[java]<div id="flip">
<div class="flip-content one">
<h1>Front Box</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum placerat arcu in volutpat pulvinar. Ut a neque enim. Donec nec
lorem adipiscing, lobortis elit nec, aliquet massa. Morbi augue augue,
tempor vel nunc in, aliquam pellentesque quam. Nulla viverra
vehicula vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>

<div class="flip-content two">
<h1>Back Box</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum placerat arcu in volutpat pulvinar. Ut a neque enim. Donec nec
lorem adipiscing, lobortis elit nec, aliquet massa. Morbi augue augue,
tempor vel nunc in, aliquam pellentesque quam. Nulla viverra
vehicula vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
</div>[/java]

CSS3 Code:

Styling of first and second box:

[java].flip-content {
position: absolute;
height: 360px;
width: 360px;
padding: 20px;
background-color: white;
border: solid 1px #ccc;
}
#flip .one {
-webkit-transform: translateZ(200px);
transform: translateZ(200px);
}

#flip .two {
-webkit-transform: rotateY(90deg) translateZ(200px);
transform: rotateY(90deg) translateZ(200px);
}[/java]

But does this makes a 3D effect?

No!

Here goes the code to give styling for 3D flip animation on mouse hover of box1 and box2:

[java]#flip {
position: relative;
margin: 0px;
height: 400px;
width: 400px;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 2s ease;
transform-style: preserve-3d;
transition: all 2s ease;
}
#flip:hover{
transform: rotateY(-90deg);
}[/java]