Question

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

我在以下浏览器/版本上测试了以下代码：

Firefox：29
Chrome：34
IE：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）链接，确认了浏览器的兼容性。

我创造了一个小提琴来举例说明这个问题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，您只需在onmouseover上使用text即可获得相同的结果，而无需包含大量内容库。

javascript：转换不工作

1 个答案: