When using rotateY() css flip animation I am dynamically setting the background of the side that is going to be shown to an image but since everything gets flipped the image is backwards . I creating new elements inside and setting their contents/background to the image but they get flipped as well. Any solutions?
More info
I am essentially doing this http://www.inserthtml.com/2011/09/css3-3d-transforms-keyframes/ but I am having that animation be activated when another animation finishes using
boardCard.addEventListener(‘transitionend’,function(event{boardCard.style.MozTransform=’rotateY(-180deg)’;
at this point I also want to dynamically set the background which works fine except everything inside gets flipped so the image is wrong.
What you need to do is have the backside of the flipped element already flipped, so that when you flip the main element around, the elements on the backside will actually be flipped back to their normal orientation.
There’s a really good example and tutorial for this here: http://desandro.github.com/3dtransforms/docs/card-flip.html
You’ll see that they add transform: rotateY( 180deg ); to the .back side of the card ahead of time, so that when they add the .flipped class onto the main card, it flips the .back side of the card back to normal orientation.