Jquery flip script not showing unique content on flip back side - php

Question

I am trying to implement Rotate3Di, found here: http://www.zachstronaut.com/projects/rotate3di/
I can get my images to flip, but the back side is only showing a mirror image of the front and not unique content that I am pulling from a database. Thanks for any help in advance.
<script type="text/javascript" language="javascript" charset="utf-8">
$(document).ready(function () {
$('#movienav li div.back').hide().css('left', 0);
function mySideChange(front) {
if (front) {
$(this).parent().find('div.front').show();
$(this).parent().find('div.back').hide();
} else {
$(this).parent().find('div.front').hide();
$(this).parent().find('div.back').show();
}
}
$('#movienav li').hover(
function () {
$(this).find('div').stop().rotate3Di('flip', 180, 1000, {direction: 'clockwise', sideChange: mySideChange});
},
function () {
$(this).find('div').stop().rotate3Di('unflip', 1000, {sideChange: mySideChange});
}
);
});
</script>
HTML
<div id="movienav">
<ul>
<li><div class="front"><img src="<?php echo $imglink; ?>" width="340" height="450" class="dvdcover" /></div>
<div class="back">
<?php echo $description; ?>
</div>
</li>
</ul>
</div>
CSS
#movienav {
height: 450px;
width:75%;
float:left;
margin-top:25px;
clear:left;
padding-bottom: 45px;
}
#movienav li {
width: 340px;
height: 450px;
float: left;
margin-right: 10px;
position: relative;
display:inline;
list-style:none;
}
#movienav li div {
width: 340px;
height: 450px;
overflow: hidden;
background: #161616;
position: absolute;
top: 0;
left: 0;
}
#movienav li div.back {
left: -999em;
padding-bottom: 15px;
background-color:#161616; /*max-height:450px; overflow:auto;*/
margin-top: 0;
}
SOLVED
Changed above lines to:
$('#movienav li').hover(
function () {
$(this).find('div').stop().rotate3Di('180', 400, {direction: 'clockwise', sideChange: mySideChange});
},
function () {
$(this).find('div').stop().rotate3Di('unflip', 400, {sideChange: mySideChange});
}
);

Answer 1

http://davidwalsh.name/css-flip
I think you want backface-visibility: hidden;
I'll be honest I've only done this via CSS and not with javascript, but I had the same issue at first until I set the backface-visibility. Doing everything via javascript might require some extra magic.