Question

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

<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>

我的初始代码示例是here

Answer 1

假设这是你想要的......

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

这是fiddle

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

Answer 2

使用css3，您可以非常轻松地完成此操作这是一个例子。 http://css3.bradshawenterprises.com/flip/

如何在点击添加课程时翻转元素？

2 个答案: