Best Way to Create A Card Flip Animation (one side has info, other has an image)?

[seank (Sean Watkins)]

I want to create a flip card animation. I have started doing so on one of my websites but as you will see there is some issues with the rotate. It’s not as clean as I would like it to be.

What have you guys done to achieve this animation - and what is best practices for this?

https://preview.webflow.com/preview/janehudson?preview=b3bba42250fbf3331f27229f445398c8

Thanks,
Sean

---

Here is my public share link: https://preview.webflow.com/preview/janehudson?preview=b3bba42250fbf3331f27229f445398c8
(how to access public share link)

[seank (Sean Watkins)]

This link below may answer my question. But I am also curious to see what you guys have created similar to this!

Build flip cards with transforms | Webflow University

[Keejo (Kai Jolly)]

Hi seank, I created flip cards on this site following the Webflow tutorial - trouble is they don’t work well in Firefox or IE. I have created a forum post about this issue but no replies yet!

http://webfonicsolids.webflow.io/

Regards
Kai

[seank (Sean Watkins)]

@Keejo ! thank sir… I got it to work on mine as well… still in rough format though. www.mywebmb.com/JH under the “featured products” section.

-Sean

[seank (Sean Watkins)]

How did you get your shapes to look 3d! love that.

[Keejo (Kai Jolly)]

my pleasure! If you don’t mind me commenting, on first load the images took a while to load and were a bit ‘crunchy’ - are the images actual size or HiDPI? Also I would remove the white background from the dresses image and add a hand point cursor to the ‘Shop Now’ button (will make it more of an interaction when you hover over)…

Also, see if it works ok in Firefox and IE.

I hope you don’t mind my feedback! Regards Kai

[seank (Sean Watkins)]

Absolutely not! love feedback ty. I was just playing around with it to see if I could figure it out. Luckily i did. I’ll fine tweak it now. It works for me on Fireworks, haven’t tried IE yet.

[Keejo (Kai Jolly)]

The shapes are pngs set up in Photoshop with an inside coloured stroke and 80% opacity background (to give the see-through wireframe effect) - then all added individually and moved around using 3d transforms and hover/rotate interactions. Phew! Seems like a lot of work now!

[seank (Sean Watkins)]

Haha, well work that paid off… nice work man.

[Keejo (Kai Jolly)]

Thanks Sean! It was a bit of a head scratcher! The fact that the flips don’t work well on FF and IE for me is probably down to something I’ve done or not done! Good luck with your site!