在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)
• 旋转的前半部分的回调函数切换类
• 每个动画的动画持续时间减半,持续时间为500毫秒,共计1秒(作为初始动画)