javascript : Transform not working

Question

为什么这种转换不会发生在 mozilla/ie 上，但它会发生在使用以下代码的 webkit 浏览器上？

我已经在以下浏览器/版本上测试了下面的代码:

• 火狐:29
• Chrome :34
• 即:11

代码:

var text = document.getElementById('text');

transform = "scale3d(2,2,0) " + "translate3d(20px, 0, 0) ";

$('#text').hover(function (){
    text.style.transform = transform;
    text.style.webkitTransform = transform;
    text.style.msTransform = transform;
});

我的代码基于此 ( W3Schools) 链接，该链接确认了浏览器的兼容性。

我创建了一个 fiddle 来举例说明这个问题 http://jsfiddle.net/3fxf6/

Answer 1

这适用于所有浏览器(支持转换):

JSFiddle

我把它变成了纯 JS:

var text = document.getElementById('text'),
    transform = "scale3d(2,2,1) translate3d(20px, 0, 0)";

text.onmouseover = function(){
    text.style.transform = transform;
    text.style.webkitTransform = transform;
    text.style.msTransform = transform;
}

它不起作用，因为您将 z 的比例设置为 0，使其消失。它需要为 1 才能在 Firefox 上运行，但在所有浏览器中给出相同的结果。

此外，您不需要为了实现 hover 效果而包含 jQuery，您只需在 text 上使用 onmouseover 即可获得同样的结果，而无需包含庞大的库。