建了一个站点,很大一部分依赖翻转DIV,有3D效果,昨天早上升级到FF14,效果坏了。它在 FF13、Chrome、IE9 等中运行良好。
我无法发布我正在使用的网站,但这个网站以完全相同的方式损坏 - 它在卡片的正面和背面之间跳转,而不是旋转
http://jigoshop.com/product-category/extensions/
有人有什么想法吗?
编辑:好的,可能应该包含更多信息
我正在使用这个插件来处理翻转
http://www.zachstronaut.com/projects/rotate3di/
当我说它与其他网站的技术相同时我错了,因为它看起来是纯 CSS,而这个插件是用于 jQuery 的。这是我放在一起的演示的链接
http://olliesilviotti.co.uk/the-laboratory/cards/demo/
编辑:查询的使用方式如下:
$('#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');
}
});
标记如下所示:
<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>
最佳答案
这实际上是因为 Firefox 遵循最新标准。来自 https://developer.mozilla.org/en/Firefox_14_for_developers
As it has been removed from the draft standard, support for the skew() function has been removed from transform property.
(这会导致整个 -moz-transform
声明被丢弃。)
与其向 Bugzilla 报告错误,不如向插件作者报告。
关于javascript - Firefox 14 破坏了 3D 'card flip' 效果——有人知道为什么吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11557040/