This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
David Caputo
Posted Oct 26 - Read on Facebook

I'm trying to make a card flip over to reveal content on it's backside but whenever I use the rotationX property the card gets cut off and hidden beneath the layers below it. Can't seem to find anything on codepen or in the docs specifically dealing with this.

9 Comments

David Caputo

Thanks Koen! I knew it had to be around here somewhere!

Alex Hazel

Just realize that Koen Bok solution is terrible for rendering text. If there is text on the card it will look like crap.

Koen Bok

Looks pretty good here: http://cl.ly/image/0u0F3G1g122g

Alex Hazel

On the iPhone is where I was seeing the issue. Not sure if there is a difference. Can't recreate the issue to share right now but check it out on the iPhone too.

Alex Hazel

Also it could have been an issue with the type of animation I was using or the way I had my text nested in elements too....Not sure...

Daniel Lin

Hey David, Alex, did you find a solution to this? I'm trying to achieve the exact same thing, except i want a new layer/picture to show on the card backside rather than a 'horizontally-flipped' rendering of the top layer

Koen Bok

There is. I posted about it in the group a while ago, but I'm on mobile so I can't find it.

Daniel Lin

Thanks Koen. Do you perhaps mean this post (https://www.facebook.com/photo.php?fbid=10204351230011754&set=gm.547966685330407&type=1)?

In case it is, I tried playing around with '-webkit-perspective' and couldn't achieve the effect I wanted. with 'cardWrapper' as a superlayer, I added two images as sublayers and made one of them bringToFront(). Do you think I should try something else? Thanks in advance!

Read the entire post on Facebook