jquery - 如何在单击添加类时翻转元素？

Question

有人可以帮我制作翻转 div 的动画吗？更确切地说，我想在单击时添加一个类，使用 jquery 为一个方向的翻转设置动画，然后在下一次单击时删除旧类，并为新的背景图像和新的翻转方向创建一个新类。

<style>
div{height:150px; width:150px; border:1px solid black; border-radius:10px;
    background-size:100% 100%;}
.face{background-image:url(http://media.businesslive.ro/wp-content/uploads/creative-monkeyz.png);}
.back{background-image:(http://media-cache-ec0.pinterest.com/avatars/artalacafea-1347781782_600.jpg)}
</style>
<div class="face"><div>

我的初始代码示例在这里

Answer 1

假设这是你想要的..

使用toogleClass()来切换类（'front' 和 'back'）onclick()函数..

这是小提琴

$(".face").click(function(){
  $(this).toggleClass('back');
});

Answer 2

使用 css3 你可以很容易地做到这一点这是一个例子。http://css3.bradshawenterprises.com/flip/