CSS Transform RotateX not working in IE11

[willem_wsi]

Hi

I have a “promo roller” which uses CSS animation to rotate a cube, showing only one of the four sides of the cube at any give time. The rotation of the cube shows the next side.

Please take a look at the code in this JSFiddle:
https://jsfiddle.net/c1mnfr2t/

The code works perfectly except in Internet Explorer (currently testing with IE11), in IE11 the rotational animation works fine. But the transform rotateX and translateZ used to create the cube does not work. So only side of the cube is visible, the other 3 sides are hidden behind it.

Can this be made to work in IE11?

Ps. I have already tried adding vendor prefixes, that doesn’t seem to make a difference.

Kind regards
Willem

[Shikkediel]

Unfortunately IE doesn’t support transform-style: preserve-3d.

https://stackoverflow.com/q/22848328/3168107

[willem_wsi]

Thank you Shikkediel, I’ll have to find a work around.

[Shikkediel]

Here’s a quick adaptation where the rotation animation is defined for each side of the cube (rather than the parent container, which doesn’t work in IE):

https://jsfiddle.net/9gLsok2e/

[willem_wsi]

Hi Shikkediel

Thank you for the code, however the roller becomes invisible in IE. Seems like this is being caused by the “backface-visibility: hidden;” but disabling it causes other issues similar to what was previously described.

[Shikkediel]

Unfortunately there isn’t much available to test IE online, but if I copy paste the code into the page below it seems to be working fine on IE11…

https://www.w3schools.com/tryit/tryit.asp?filename=tryhtml_default

Not sure how to help out further with it.

Edit – JS Bin supports IE so perhaps other forum members could check if they see the issue…

jsbin.com/xewegedofa/1/edit

Not sure why that hyperlink isn’t showing as a regular paste.

[willem_wsi]

Strange, the JS Bin version works in IE… must be something clashing on my site. I’ll dig around. Thank you so much for all your help, I really appreciate it :)

[willem_wsi]

Hi Shikkediel

Just wanted to thank you again for all of your help. I managed to get it working on my site. For whatever reason, I had to remove “backface-visibility: hidden;” and set the normal visibility within each animation to either hidden or visible as required.

Here is the JS Fiddle if anyone is interested.

https://jsfiddle.net/v0p7qntf/

Thanks again!
Willem

[Shikkediel]

Graag gedaan. Nice workaround.

[Author]

Posts