在HTML5中沿Z轴旋转 - 翻转卡

Question

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

使用HTML5 / Canvas / CSS3可以达到同样的效果吗？

PS：关于HTML5和CSS3的东西，我是完整的新手/菜鸟。

全部谢谢

Answer 1

It's possible using CSS3 with Javascript

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

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

Answer 2

这不是答案，但在提交此处的表单后，我看到了我认为您正在谈论实施的内容：http://sublimevideo.net/

很多他们的CSS和JS都被混淆了，但是从我可以收集到的内容看起来他们正在通过JS类交换机使用webkit转换。它非常流畅，实际上让我惊讶的是它的外观令人惊艳。希望有些人可以帮助你。