CODEWITHSUNDEEP
javascriptjquerycssmozilla
helmaks
helmaks

Reputation: 48

javascript : Transform not working

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:

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/

Upvotes: 3

Views: 10438

Answers (1)

Albzi
Albzi

Reputation: 15609

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.

Upvotes: 3

Related Questions