Card flip animation issues

Design help General
1

I’ve worked a bit with @esteban.a.valdez (I think that’s you) and @PixelGeek to get to the point where I have an almost functional card flip, using this tutorial as a starting point:

It’s not really clear in the .gif, but I’m seeing some flickering on the animation (which I’m currently only testing on the first card in that little section). Can you help fix this flickering?

My build so far

At this point I have this Interaction on a cardWrapper div…

244×556 684 KB

… that then contains cardFront and cardBack divs, each of which has backface hidden. cardBack is also rotated 180° so as to start “flipped”, per the tutorial.

240×539 11.9 KB

##Perspective too?

Also, I’d love to get some perspective on this flip animation (the divs would grow in height as they rotated, getting “closer” to the user)

Help? :slight_smile:

Here is my public share link: LINK
(how to access public share link)

2

remove your hover

1257×555 1.77 MB

3

You saved the day! Silky smoove now!

Okay, now bonus points… I do want to have a hover effect (say, a bit of rotation in the opposite direction) on each of these cards, to indicate that it’ll do something (flip) when clicked. Any suggestions?

And more bonus points for helping me get perspective in there! :smile:

Also, I’d love to get some perspective on this flip animation (the divs would grow in height as they rotated, getting “closer” to the user)

4

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