A site was built where most of it relies on inverted DIVs with a 3D effect, updated to FF14 yesterday morning, and the effect was disrupted. It works fine in FF13, Chrome, IE9, etc.
I can’t publish the site I’m working on, but this site is broken in the same way - it jumps between the front and back of the card, and does not rotate
http://jigoshop.com/product-category/extensions/
Does anyone have any ideas?
EDIT: OK, maybe you should have included more information
I use this plugin to handle the flip
http://www.zachstronaut.com/projects/rotate3di/
I was mistaken when I said that this is the same technique as another website, because it looks like simple CSS, whereas this plugin is for jQuery. Here is a link to the demo that I threw together
http://olliesilviotti.co.uk/the-laboratory/cards/demo/
EDIT: this is how the request is used:
$('#boxes .box 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();
}
}
$('#boxes .box').live('mouseover', function() {
if (!$(this).data('init')) {
$(this).data('init', true);
$(this).hoverIntent({
over: function () {
$(this).find('div').stop().rotate3Di('flip', 250, {direction: 'clockwise', sideChange: mySideChange});
},
timeout: 1,
out: function () {
$(this).find('div').stop().rotate3Di('unflip', 500, {sideChange: mySideChange});
}
});
$(this).trigger('mouseover');
}
});
The markup is as follows:
<div id="boxes">
<div class="box floated-box">
<div class="front">Random Number</div>
<div class="back">I am the back of the card</div>
</div>
</div>