2 Replies Latest reply on Jul 17, 2014 1:38 PM by mikewirthart

    CSS 3D Card Flip possible in all browsers?




      I've been working to create a 2 sided 3d card flip via CSS in Edge using rotateY. I've looked at Chris Gannon's example as well as other threads on this forum. However, I'm stumped to find a solution that works in all browsers (IE is the outlier because it doesn't support preserve 3D).


      Many of the existing solutions that I've listed below seek to rotate the container div of both sides of the card and the IE documentation says that it's possible to target each side to flip them simultaneously. However, I can't seem to implement that into Edge.


      I got close examining toggleClass, but got stuck there.


      Here is what I've looked at so far and that hasn't fully worked:

      3D Card Flip using Adobe Edge Animate and Greensock TimelineMax | Chris Gannon


      3D Flip Transform in IE10 | Treehouse Forum


      CSS Flip Animation


      Does anyone know of any places or have a solution that works for all browsers?