javascript - Firefox 14 破坏了 3D 'card flip' 效果——有人知道为什么吗?

标签 javascript jquery css firefox

建了一个站点,很大一部分依赖翻转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/

相关文章:

jquery - 水平/垂直跨浏览器居中图像

javascript - 如何将指令参数传递给指令

javascript - Google Maps API v3 标记是否带有图像和该图像顶部的文本?

javascript - 从试图多次获取相同数据的 JavaScript 函数获取 NaN

javascript - 将代码实现到现有站点的后台。 (用JS动画替换背景图片)

javascript - 处理接受文本和 json 格式的 ajax 响应

css - 为什么我的窗口小部件不在屏幕中央?

Javascript 替换全部在 macOS/iOS 上的 safari 中不起作用

javascript - 使用基于选择框的 jQuery 隐藏 div

javascript - 单击第一个元素,更改第二个元素的样式