HTML5 中沿 Z 轴旋转 - 翻转卡片
我刚刚在翻页卡上发现了一个简单的 Flash 动画
扑克牌效果
该卡有 2 个图像“正面”图像和“背面”图像，
单击时，卡片会沿 Z 轴旋转进行切换
相应地显示正面和背面。
使用 HTML5 / Canvas / CSS3 可以达到同样的效果吗？
PS：对于 HTML5 和 CSS3 的东西，我完全是新手/菜鸟。
谢谢大家
I just came across a simple flash animation on flip card
The Playing Card Effect
The card has 2 images "front" image and "back" image,
when clicked the card toggles with rotating along Z axis
showing the front and back face accordingly.
Can the same effect be achieved using HTML5 / Canvas / CSS3 ??
PS: I'm complete newbie/noob when it comes to HTML5 and CSS3 stuff.
Thanks all
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
当旋转使卡片显示其背面时，将图形切换到“背面”图形。否则，将图像 src 设置为正面图形。
您还可以使用 setTransform 倾斜 html5 canvas 上下文。或者您可以采取慢速路线并手动操作像素数据。
When rotation makes it so the card shows its backside, switch the graphic to the "back side" graphic. Otherwise, set the image src to the front side graphic.
You can also skew with the html5 canvas context using setTransform. Or you could take the slow route and manipulate pixel data manually.
这不是答案，但我看到了我相信您在提交此处提供的表单后所谈论的实施内容： http: //sublimevideo.net/
他们的很多 CSS 和 JS 都被混淆了，但从我收集到的信息来看，他们似乎正在通过 JS 类开关使用 webkit 转换。它非常流畅，而且它看起来如此令人惊叹，实际上让我感到惊讶。希望一些来源可以帮助您。
This isn't a answer, but I saw what I believe you're talking about implementing done after submitting the form featured here: http://sublimevideo.net/
A lot of their CSS and JS is obfuscated, but from what I can glean it looks like they're using webkit transforms via a JS class switch. It's very fluid and actually surprised me by how stunning it looked. Hopefully some of the source can help you out.