Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does IE9 support 3D CSS Transforms?

Tags:

html

css

3d

Has anyone run tests for running 3D CSS Transforms on Internet Explorer 9? If so, have they been successful?

I can't find any information on it, of course Chrome/Safari/Firefox are already adding support for it :)

Some wicked new 3D CSS syntax

translate3d(x, y, z), translateZ(z)
Move the element in x, y and z, and just move the element in z. Positive z is towards the viewer. Unlike x and y, the z value cannot be a percentage.

scale3d(sx, sy, sz), scaleZ(sz)
Scale the element in x, y and z. The z scale affects the scaling along the z axis in transformed children.

rotateX(angle), rotateY(angle), rotate3d(x, y, z, angle),
The first two forms simply rotate the element about the horizontal and vertical axes. Angle units can be degrees (deg) radians (rad) or gradians (grad). The last form allows you to rotate the element around an arbitrary vector in 3D space; x, y and z should specify the unit vector you wish to rotate around (we’ll normalize it for you).

perspective(p)
This function allows you to put some perspective into the transformation matrix. For an explanation of p, see below. Normally perspective is applied via the -webkit-perspective property, but this function allows you to get a perspective effect for a single element, with something like:

-webkit-transform: perspective(500px) rotateY(20deg);

matrix3d(…)
This function allows you to specify the raw 4×4 homogeneous transformation matrix of 16 values in column-major order. Have fun with that!

Taken from here.

like image 722
Marko Avatar asked Mar 25 '11 00:03

Marko


3 Answers

No, IE9 doesn't support 3D transforms, just 2D ones.

Microsoft lists here the new features of the browser: http://msdn.microsoft.com/en-us/ie/ff468705 -- 3D transforms didn't make it.

As a note: the client-specific prefix for CSS properties in IE9 is -ms-*

like image 71
Gavin Anderegg Avatar answered Nov 14 '22 20:11

Gavin Anderegg


The Firefox documentation is kind enough to mention what the minimum browser versions are that support it: https://developer.mozilla.org/en/CSS/-moz-transform#Browser_compatibility

Internet Explorer 10, Firefox 10, Chrome 12, Safari 4

So as mentioned IE9 doesn't but IE10 once released will. Safari, Chrome & Firefox now have release versions that support it, and Opera has no mention of support yet.

like image 39
Michael Avatar answered Nov 14 '22 21:11

Michael


It does not. Only safari 5 is listed as supporting this features.

For more information, here is an extensive comparison: http://www.findmebyip.com/litmus/ of css3 and html5 features supported in different browsers

like image 39
arg20 Avatar answered Nov 14 '22 21:11

arg20