javascript : Transform not working

Question

why doesn't this transformation occur on mozilla/ie but it does for webkit browsers using the following code?

I have tested the code below on the following browsers/version:

• Firefox: 29
• Chrome: 34
• IE: 11

Code :

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;
});

I have based my code on this (W3Schools) link which confirms the browser compatibility.

I created a fiddle to exemplify this issue http://jsfiddle.net/3fxf6/

Answer 1

This works for me in all browsers (that support transform):

JSFiddle

And I made it pure 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;
}

It didn't work because you were setting the scale of z to 0, making it disappear. It needs to be 1 to work on Firefox, but gives same result in all browsers.

Also you didn't need to include jQuery just to do a hover effect, you can just use onmouseover on text to get the same result, without having to include a bulky library.