This works for me in all browsers (that support transform):
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.