如何倾斜/旋转带有图像的画布？答案

【问题标题】：How to tilt/rotate canvas with image inside it?如何倾斜/旋转带有图像的画布？
【发布时间】：2013-02-27 09:48:22
【问题描述】：

当谈到 Javascript 和画布和其他东西时，我是一个完全的新手，但我有这张图片 (1920x1080)，我想做的是当有人将鼠标悬停在它倾斜的图片上时。

因此，如果我将鼠标移到图像的顶部，则看起来图像的底部朝我伸出，而顶部则进入文档。如果我将鼠标向右移动，左侧会稍微突出，而右侧会进入文档。

像这样，http://www.simpleviewer.net/tiltviewer/app/ 只是更微妙，而不是在 Flash 中。

这个例子是用 JavaScript 完成的，但我不知道怎么做，而且我不能完全阅读源代码，我不想撕掉源代码 http://mrdoob.com/97/depth_of_field

我不知道从哪里开始，甚至不知道如何开始，我现在只是潜入 Javascript 的更高级部分，所以任何帮助/建议将不胜感激。

【问题讨论】：

【解决方案1】：

这是我刚刚制作的演示。您可以更改其中的值。

-webkit-transform:  skewX(30deg);

到 40 度

尝试将鼠标悬停在猫的图像上。

基本上，您需要了解 css 转换和 css 转换才能执行您提到的演示应用程序。

【讨论】：