Jquery 如何设置将图像翻转为另一图像的动画？

如何像下面的链接一样翻转图像

我希望它在一定的时间间隔内完成。是否可以仅使用css3来实现此功能？

css3提供了，您可以在此处找到如何使用此功能

下面是我的一个示例，它使用了两个类

flipH

和

flipV

，应用于父元素将知道如何处理子

卡

元素。
仔细阅读CSS以正确设置背面，并了解悬停的用法（如果需要） 过渡，但主要是交替动画：

/*：：持有者、卡片、面孔*/
.持有人{
显示：内联块；
宽度：64px；
高度：64px；
透视图：700px；
}
.card、.front、.back{
位置：绝对位置；
身高：继承；
宽度：继承；
过渡期：全部7秒；
变换样式：保留-3d；
背面可见性：可见；
}
/*：：面孔*/
.front{背景：西红柿；}
.back{背景：slategray；}
/*：：设置面*/
.flipH.back{变换：旋转（-180度）；}
.flipV.back{transform:rotateX（180度）；}
/*：：悬停效果（自动删除以使其生效）*/
.flipH:hover.card{transform:rotateY（180度）；}
.flipV:hover.card{transform:rotateX（-180度）；}
/*：：自动效果*/
.flipH.卡{
动画：FlipH2S 0s无限交替缓进缓出；
}
.flipV.卡{
动画：flipV 2s 0s无限交替缓进缓出；
}
@关键帧翻转{
0%{变换：旋转（0度）；}
100%{变换：旋转（-180度）；}
}
@-webkit关键帧flipH{
0%{变换：旋转（0度）；}
100%{变换：旋转（-180度）；}
}
@关键帧flipV{
0%{transform:rotateX（0deg）；}
100%{transform:rotateX（-180度）；}
}
@-webkit关键帧flipV{
0%{transform:rotateX（0deg）；}
100%{transform:rotateX（-180度）；}
}

A.
B
A.
B

是的，这是可能的。在所有关于CSS3翻转卡片的教程中，哪一个对您来说更容易理解？你试过什么？介意分享一些代码吗？我想让动画像循环一样，先a翻转，然后B翻转，然后C翻转，然后a再翻转，B再翻转，依此类推。这可能吗？@mars这似乎是另一个问题。。。是的，这是可能的。你看过“如何暂停CSS3动画”吗？@BinkyNichols很抱歉这是一个遗留错误。您必须将

背面可见性

设置为

可见

-固定的-