在y軸上旋轉元素以查看背後的背景和文字

Question

我正在使用TransformJS旋轉div onclick。 div圍繞其y軸旋轉180度，從而將其翻轉靠在窗戶上。

我的問題是這樣的 - 有沒有反過來顯示單獨的background-color和背部文字一旦你翻轉它？這裏是一個快速jsfiddle我做的測試鏈接： http://jsfiddle.net/kSR9H/1/

正如你可以從小提琴看到，即使你翻轉元素，背景仍然是紅色的，我不知道如何放置背面的文字。

Answer 1

可以在兩個部分後的第一個分裂的翻轉，翻轉一類設置一個新的背景..

$("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); 
}); 

演示在http://jsfiddle.net/gaby/kSR9H/2/

• (Math.PI)/2在每個動畫（ 添加了/ 2）
• 回調函數在旋轉的上半部分中切換類
• 減半動畫的持續時間500ms的到每個動畫總共1秒（作爲初始）