创建一个网页动画，如 Flipboard 仪表板图像翻转答案

【问题标题】：Create a web animation like Flipboard dashboard image flip创建一个网页动画，如 Flipboard 仪表板图像翻转
【发布时间】：2012-08-29 10:00:21
【问题描述】：

我正在尝试使用 Jquery/HTML/CSS 创建类似于 Flipboard 仪表板 imageflip 的动画。在此处查看演示 http://www.youtube.com/watch?v=w1fTI7oYfbI。

实现上述动画的人没有发布任何代码。

任何人都可以对此提出建议吗？

提前致谢。

【问题讨论】：

我认为如果没有 CSS3 转换，这是无法实现的——你同意吗？
这个例子可以帮到你：tympanus.net/codrops/2012/05/07/…
是的，没关系。如果我必须使用 CSS3。你能告诉我你对这件事的了解吗？
谢谢 LeBen，我已经提到了那个资源。这个概念与 Flipboard 翻转完全不同。那是一个书夹。他使用两个独立的图像并在另一个上翻转，但为了实现 Flipboard 效果，我们必须将图像分成两半并对顶部进行动画处理。我不知道如何分割图像。查看工作流程openaphid.github.com/images/flip-75-degree.jpg 和openaphid.github.com/blog/2012/05/21/…

【解决方案1】：

您需要 CSS 转换来创建这样的动画。在以下位置可以找到类似的演示（带代码）： http://www.markandey.com/2011/12/flipboard-like-ui-on-iphone-safari.html

注意，示例中只使用了 webkit 前缀，请确保也使用其他前缀，以支持多种浏览器。您可以在以下位置找到有关转换的所有信息： http://www.w3schools.com/cssref/css3_pr_transform.asp

希望你有足够的能力让你现在就开始。

【讨论】：

非常感谢莫里斯。这对我有很大帮助。使用前缀它也可以与 Firefox 一起使用。我正在尝试将其更改为自动翻转动画。我觉得我需要弄乱方向（）、启动、拖动和停止功能。您对此有什么建议吗？