Jump to content
Search Community

Simple 3D Hover Flip - CodePen

BarryS test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys,


It would appear the CodePen example of the 3D hover flip is broken in Chrome.


See the Pen yzahJ by GreenSock (@GreenSock) on CodePen


I love this effect and got to work creating my own examples without first checking browser compatibility. Damn you Internet Explorer! I was so surprised that it didn't work on IE9 and 10. I supposed I should have expected it!


Anyways, I just thought I'd let you know about it not working in Chrome as I thought should. It works beautifully in Firefox though.







Link to comment
Share on other sites

Hi Barry,


I appreciate you trying to help, especially in the case that one of our demos might be broken.

I just tested in Chrome Version 28.0.1500.95, FireFox and Safari (all on Mac) and it works great.


IE9 doesn't support 3D transforms at all and although IE10 does, IE10 does not support the transform style preserve-3d (which aids in hiding the element in the back).


You could still achieve this effect in IE10 but you'd have to manually hide certain elements.




Link to comment
Share on other sites

Hi Jonathan and Carl,


Thank you for your replies. I'm using XP and the Chrome version 28.0.1500.95.


If I wanted to use the effect I'd need to create a alternative script for older browsers anyway. But I still thought it best to point it out.


I had wanted to upload a screenshot of my version of Chrome but the uploader says the file is too big to upload.


Essentially, what happens is the front of the card face is are not shown and all I see is a mirror image of the card face back.





Link to comment
Share on other sites

Hm, sounds like a Windows XP Chrome bug (not GSAP). All of my versions of Chrome display that animation great, and it follows standards as far as setting css values. If there is indeed a bug in Chrome, I'd recommend reporting that to the Chrome team. Thanks for letting us know. 

Link to comment
Share on other sites

  • 9 months later...
You could still achieve this effect in IE10 but you'd have to manually hide certain elements.



The "Simple 3D Hover Flip" seems not to work in IE10 (Windows 7) – is there a code pen example for this working in IE10, too?


Thank you,



Link to comment
Share on other sites

Hi Tobias,


The thing is that the sample from the GreenSock collection uses transform-style:"preserve-3d". When you use this style and rotate an element, all the child elements it contains will be rotated as well. Turns out that IE10-11 don't support this useful property, so you have to manually take care of everything you rotate, which means rotating at the same time both elements (front and back).


Here's a little sample of how it can be done:


See the Pen vjGxH by rhernando (@rhernando) on CodePen



  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...