UP_AND_ATOM
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by UP_AND_ATOM
-
-
This is great, but the issue I'm having is with swapping out the card's front for the back when it rotates, and vice-versa. I need to know which of the two faces is visible so that I can remove the front-facing div and add the back-facing div.
-
I've been working on reproducing one of my favorite card games in JavaScript and I'm having some problems getting the 3d rotations to work the way I'd like.
I'm using TweenLite to flip the cards' divs with rotationX and rotationY, but I can't figure out how to tell when I need to swap out the front and back of the card. Is there a way to detect which side of the card is visible?
I've seen it done with CSS like this: http://davidwalsh.name/css-flip, but 'backface-visibility: hidden' doesn't seem to affect objects that are rotated with TweenLite.
Card flipping with TweenMax and CSS
in GSAP
Posted
Thanks, being able to get the current rotationX and rotationY is exactly what I was looking for! I'll swap out the card faces when the card is at 90 degrees.
The one issue I'm still having is that when I adjust the x and y values for the card, its perspective gets offset so that the card isn't perpendicular to the camera when it's turned 90 degrees. Should I just wrap the card in another div and apply position transforms to that parent div and keep 3D rotations on the child div?