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 ）
回转函数在旋转的前半部分切换类
每个动画的动画持续时间减半，持续时间为1秒（作为初始）

在y轴上旋转元素以查看背面的“背后”背景和文本

1 个答案: