【问题标题】:Rotate along Z- axis in HTML5 - Flip card在 HTML5 中沿 Z 轴旋转 - 翻转卡片
【发布时间】:2011-03-29 10:25:08
【问题描述】:

我刚刚在翻转卡片上看到了一个简单的 Flash 动画
The Playing Card Effect
该卡片有 2 张图片“正面”图片和“背面”图片,
当点击卡片时,沿 Z 轴旋转
相应地显示正面和背面。

用HTML5/Canvas/CSS3能达到同样的效果吗??

PS:在 HTML5 和 CSS3 方面,我完全是新手/菜鸟。

谢谢大家

【问题讨论】:

标签: javascript html canvas css rotation


【解决方案1】:

It's possible using CSS3 with Javascript

当旋转使卡片显示其背面时,将图形切换到“背面”图形。否则,将图片src设置为正面图形。

您还可以使用 setTransform 扭曲 html5 画布上下文。或者您可以采用慢速路线并手动操作像素数据。

【讨论】:

  • 该链接在 Safari 上对我有用。 Flash 动画链接flashandmath.com/advanced/card 中涉及的代码和数学可以重复用于在画布上绘图吗?
  • 以上网站因安全威胁而被阻止。太棒了!
  • 我的帖子是在大约 7 个月前发布的。该网站在发布时是相关的。我显然不能保证该网站将保持安全/相关,因为我不是它的网站管理员。 .... 不管怎样,我觉得这个网站还不错!
【解决方案2】:

这不是一个答案,但我看到了我相信你在提交这里特色的表单后所说的实现:http://sublimevideo.net/

他们的很多 CSS 和 JS 都被混淆了,但据我所知,他们似乎正在通过 JS 类开关使用 webkit 转换。它非常流畅,实际上它的外观让我感到惊讶。希望一些来源可以帮助你。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-11-30
    • 1970-01-01
    • 1970-01-01
    • 2013-01-04
    • 1970-01-01
    • 2017-10-26
    相关资源
    最近更新 更多