Translate3d and Transitions CSS3 in IE7 and IE8

[jonnow]

Hey,

I’m working on a project that needs a slidey menu to fly out from the side (see a CodePen demo). I’m using translate3d in the CSS to do this and attached smooth animation to it but it also needs to work within IE back to 7. Is there some sort of Polyfill/Modernizr to get translate3d working with IE7 and 8 or will it need some margins and js animations to be created?

Many thanks

[Paulie_D]

Modernizr doesn’t polyfill.

It’s a feature detection script that will apply classes to your HTML element depending on whether a browser supports a property / feature.

You can then use that class to target the elements for a fallback.

Eg. If a browser doesn’t support transforms a no-transform class is added and you can then do

.no-transform #myelement {
fallback CSS
}

Frankly, even thinking of trying to polyfill 3d transforms for IE7/8 would probably be an exercise in futility. I’m sure there must be something but the potential benefits would be far outweighed by the sheer hassle of getting it done.

Still, no harm in looking. :http://jpanelmenu.com/

That said, is this really a “3d” transform if all you are doing is sliding it in from off-canvas?

That’s “2d” isn’t it? In which case it might be a little easier using positioning and overflows etc.

[Author]

Posts