I love the new 3D Transform feature. I have just one small issue / question. I’ve set up a card flip animation using CSS in Webflow and for some reason only the first card flips and shows the correct back card information. All the other cards do not show anything when flipped. Am I missing something? (Sure i am. lol) Any help would be greatly appreciated.
My guess is that you are trying to apply a 3d transform wrapper class to the columns? I think you need to apply it to a plain old Div. Evidently, the columns will not work.
Thank you for taking a look at my site and for feedback. I was thinking that might be the problem as well, but after applying the 3d transform wrapper to a plain old div…still nothing. Actually, the first card has now also stopped working as well. lol Since i’m new to Webflow, do you think the way I built the front and back card (class name, structure, etc.) is correct, and how I nested them?
I’m a little baffled here, too. I tried a couple of things that seemed to help part of the problem but not all of it…
Set the “cardWrapper” position to relative
Move the Children perspective of 1200px off the “cardWrapper” element and applied it to the outer “divMaskClear” section div. (I’m not fully versed in this perspective setting)
Make sure that the cardFront div isn’t showing its backface.
Again, I couldn’t get it to fully work (show that cardBack) but I got them flipping… Since this is an edited version of what you had before, you might want to try rebuilding this following the tutorial. Shouldn’t be too hard.