沿着y轴旋转元素以查看背景和后面的文本

Question

我正在使用TransformJS旋转一个div，其中包含onclick事件。该div沿其y轴旋转180度，因此翻转到窗口的另一侧。我的问题是：是否有任何方法可以在翻转后显示单独的背景颜色和文本？即使您翻转了元素，如链接http://jsfiddle.net/kSR9H/1/中所示，背景仍然是红色的，我无法找出如何在背面放置文本。

- sir_thursday

---

创建一个新元素，并在另一个元素不可见时将其“翻转”到视图中。 - TheZ

那是一个非常有创意的想法。我会看看我能做到什么程度。 - sir_thursday

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秒钟（与最初的相同）

- Gabriele Petrioli

---

@Hubrid 我会投上我的赞，这就像是同样的事情 :) - TheZ