Question

I’m using TransformJS to rotate a div onclick. The div rotates 180 degress about its y-axis, thus flipping it over against the window.

My question is this- is there anyway to show separate background-color and text on the back of the element once you flip it? Here is a link to a quick jsfiddle i made to test:
http://jsfiddle.net/kSR9H/1/

As you can see from the fiddle, even if you flip the element, the background is still red, and I can’t figure out how to place text on the back.

Answer 1

You can split the flip in two parts and after the first, toggle a class that sets a new background..

$("p").click(function() {
    $(this).animate({
        rotateY: "+=" + (Math.PI) / 2
    }, 500, function() {
        $(this).toggleClass('flipped'); // toggle class while the flip is in the middle
    }).animate({
        rotateY: "+=" + (Math.PI) / 2
    }, 500);
});

Demo at http://jsfiddle.net/gaby/kSR9H/2/

• (Math.PI) / 2 in each animation (added the /2)
• callback function in the first half of the rotation that toggles the class
• halved the animation duration to 500ms for each animation for a total of 1 sec (as the initial)