I set up a flipcard animation following the below HubSpot article and the animation works in chrome but not in IE. Currently in IE the card flips and displays the image again as opposed to showing text. I thought specific browsers were addressed in the article so I am not sure how to fix the issue.
Can someone help figure out how to make the flip animation in IE look more like the flip in chrome? The goal is to have the photo show initially then on the flip, text on a solid background show.
Without doing too much research I'm pretty sure that IE's transform properties are still doing a little catch up to other browsers. Specifically the backface-visibility and the transform-style: preserve-3d. Check out CanIUse.com for specifics.
This stackoverflow post has a solution that seems to work in IE9 and up. Prior versions of IE if I'm not mistaken do not support these transforms. You'll notice the verndor prefixes in the solutions css: "-ms-transform-style: preserve-3d;"
Without doing too much research I'm pretty sure that IE's transform properties are still doing a little catch up to other browsers. Specifically the backface-visibility and the transform-style: preserve-3d. Check out CanIUse.com for specifics.
This stackoverflow post has a solution that seems to work in IE9 and up. Prior versions of IE if I'm not mistaken do not support these transforms. You'll notice the verndor prefixes in the solutions css: "-ms-transform-style: preserve-3d;"
Thanks for posting this! With some tinkering, we've been able to implement this on our site. The flip now works great in IE so thank you for sharing. This was a great solution.