Flipcard Animation Not Working in IE

SOLVE
New Contributor

Hello!

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.

 

Thanks in advance for your help!

 

Original article

https://designers.hubspot.com/blog/code-hacks-building-flipcards-on-the-hubspot-cms

 

Website:

https://www.neamgroup.com/clientfocus2019#speakers

CSS
Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Advisor

Hey @pixel 

 

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;"

 

Hope this helps!

2 Replies 2
Highlighted
Advisor

Hey @pixel 

 

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;"

 

Hope this helps!

New Contributor

Hi @Kevin-C !

 

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.