▼
Streaming live at 10am (PST)

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

#1

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)

Card Flip Interaction With Affected Sibling
#2

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

https://help.webflow.com/video-tutorial/card-flip-animation-using-3d-transforms

#3

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

#4

@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

#5

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

#6

my pleasure! :slight_smile: 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! :slight_smile: Regards Kai

#7

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.

#8

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!

#9

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

#10

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!

#11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.