为什么这个关于 css 转换的 jquery 动画在 Opera 中不起作用答案

【问题标题】：Why this jquery animate on css transform don't work in Opera为什么这个关于 css 转换的 jquery 动画在 Opera 中不起作用
【发布时间】：2013-08-08 10:11:52
【问题描述】：

我有一个用于转换 rotateX 的 css 属性和动画插件，但它在 Opera 中不起作用。有人知道为什么吗？

// css rotateX transformation plugin
(function($) {
    function getTransformProperty(element) {
        var properties = ['transform', 'WebkitTransform',
                          'MozTransform', 'msTransform',
                          'OTransform'];
        var p;
        while (p = properties.shift()) {
            if (element.style[p] !== undefined) {
                return p;
            }
        }
        return false;
    }
    var property = getTransformProperty(document.createElement('div'));

    if (property) {
        $.cssHooks['rotateX'] = {
            get: function(elem, computed, extra){
                return elem.style[property].replace(/.*rotateX\((.*)deg\).*/, '$1');
            },
            set: function(elem, value){
                value = parseInt(value);
                $(elem).data('roateX', value);
                if (elem.style[property].match(/rotateX/)) {
                    var rotation = value == 0 ? '' : 'rotateX(' + value%360 + 'deg)';
                    elem.style[property] = elem.style[property].replace(/rotateX\([0-9]+deg\)/, rotation);
                } else {
                    elem.style[property] += 'rotateX(' + value%360 + 'deg)';
                }
            }
        };
        $.fx.step['rotateX'] = function(fx){
            $.cssHooks['rotateX'].set(fx.elem, fx.now);
        };
    }
})(jQuery);

getTransformProperty 总是从数组中返回第一个值。

jsfiddle。（旋转应该在点击时改变）。

【问题讨论】：

标签： jquery animation transform opera

【解决方案1】：

rotateX 是 3d 变换，即not supported by Opera。（在 Opera 12.15 中测试）。

【讨论】：