Quick question that might be pretty simple for someone. In my website's CSS I've been using translate3d() quite a bit for some nifty animations. The thing is that all of these animations are 2d, I've just been utilizing translate3d() in order to take advantage of GPU rendering where applicable.
In other words, I've been using something like the following:
transform: translate3d(50%, 50%, 0); and animating it, whereas transform: translate(50%, 50%); would achieve the same visual effect without the GPU boost.
Now I was doing a little looking around on CanIUse and saw that, unfortunately, when it comes to Internet Explorer (of course) it's a bit lacking in support for translate3d(), support for 2d transformations aren't a ton better, but at least it gives me access to IE 9.
So my question is this (Mind you I'm working on a Mac and cant find a way to test it myself at the moment), If I'm using translate3d(), even though IE doesn't support that specific property, will it recognize that I am using only X and Y transformations and still render? Or would it be better to just switch them all to regular old translate()?
Like I said, the only reason I'm reluctant is because with complex animations the GPU acceleration is nice to have.
If IE won't automatically fall back (which I expect and dread), could anyone offer any other techniques such that I can leverage GPU rendering in the browsers that will support it, but fall back for IE?
Could I simply list both 2d and 3d transformations in my css (in that order), such that IE will ignore the translate3d(), or might that take up extra resources?
Thanks in advance for any input, it's all greatly appreciated.
you can use -ms-transform that only apply to IE9 and transform for the other browsers
-ms-transform: translate(50%, 50%); /* IE9 support*/
transform: translate3d(50%, 50%, 0); /* IE10+ and other browser*/
IE9 will ignore the transform and use the -ms-transform