Flipping Page: transition-origin: bottom" is not working


I am practicing with cards effects and animation.
The Front card flips in all the direction with Transition-Origin and (rotateY or X) except the bottom.
Here My Code

Could you please advise what I am missing?

Kind Regards,

Try adding height: 100% to the .content element.

Yes it worked. I just wonder why It flips at the top, I would expect that it would not work at all. Thank anyway.

I’m guessing because it had 0 height the 100% translates into 0, so it was effectively 0 0 and not 0 100%. But how it calculates the origin is a bit complicated. But it does make some sense that a 0 height element would have an incorrectly calculated origin.

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