3

我正在使用 TransformJS 来旋转 div onclick。div 围绕其 y 轴旋转 180 度，从而将其翻转到窗口上。

我的问题是——一旦你翻转它，是否有在元素背面显示单独background-color的文本？这是我用来测试的快速 jsfiddle 的链接：http: //jsfiddle.net/kSR9H/1/

从fiddle可以看出，即使翻转了元素，背景依然是红色的，我不知道怎么把文字放在后面。

4

1 回答 1

7

您可以将翻转分成两部分，在第一部分之后，切换一个设置新背景的类。

$("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 秒（作为初始）
于 2012-07-10T23:56:59.327 回答