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 patibility.

I created a fiddle to exemplify this issue /

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 patibility.

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

• javascript
• jquery
• css
• mozilla

• 3 At first w3schools is not w3c. To your problem it is probably because you set the scaling of z to 0 ? – t.niese Commented May 8, 2014 at 10:24
• 1 Mozilla never made it to version 29. I think you mean Firefox. – Quentin Commented May 8, 2014 at 10:26
• corrected thanks for the pointers :) – helmaks Commented May 8, 2014 at 10:46

1 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.