如何在网络技术上制作表单翻转(喜欢卡片翻转效果)

Posted

技术标签:

【中文标题】如何在网络技术上制作表单翻转(喜欢卡片翻转效果)【英文标题】:How to make form-flip (likes card-flip effect) on a web technologies 【发布时间】:2012-05-22 22:24:44 【问题描述】:

http://www.dailyliquordeals.net/

如何制作这样的翻牌效果。

注册完成后会翻转到另一边,有翻转过渡效果。

【问题讨论】:

【参考方案1】:

一种选择是使用 Flip! JQuery 插件:

http://lab.smashup.it/flip/

它似乎非常好用且易于使用。它与几乎所有浏览器兼容: Firefox、Chrome/Chromium、Opera、Safari 甚至 IE (6,7,8)。


另一个选项是 Flippy JQuery 插件:

http://blog.guilhemmarty.com/flippy/

它也很好而且相当灵活。但是它使用canvas 来制作效果并且与IE 6-8 不兼容。您应该使用额外的 excanvas.js 脚本使其在 IE 中工作。

【讨论】:

【参考方案2】:

本站使用 jQuery Mobile 转场效果。

你可以在这里看到它们,包括翻转:

http://jquerymobile.com/test/docs/pages/page-transitions.html

http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-transitions.html

jQuery Flip 不错,但实际上只翻转背景而不是上面的所有内容。

您还可以查看 jQTouch:http://www.jqtouch.com/

【讨论】:

以上是关于如何在网络技术上制作表单翻转(喜欢卡片翻转效果)的主要内容,如果未能解决你的问题,请参考以下文章

无法在 Chrome 上的 TransformY 之后选择输入以获得“卡片翻转”效果

如何阻止翻转效果将其他元素推离它?

我想让两张卡片在 Qt QML 中同时翻转

卡片翻转效果

AngularJS动画卡片翻转

如何在 UIScrollView 中的对象(UIViews)上执行翻转动画