用 HTML、Javascript 转换图像答案

【问题标题】：Turning an image in HTML, Javascript用 HTML、Javascript 转换图像
【发布时间】：2010-08-09 20:27:57
【问题描述】：

可以转图片吗？（跨浏览器，无插件）

例如一个滚动的球，在Flash中很容易，因为HTML5来了，所以必须有一个很好的替代品等等。

【问题讨论】：

标签： html flash

【解决方案1】：

“转”是指旋转吗？如果是这样，到目前为止我见过的最好的跨浏览器是使用Raphael。它在 IE 上使用 VML，在其他浏览器上使用 SVG。看图片旋转演示：http://raphaeljs.com/image-rotation.html

【讨论】：

【解决方案2】：

有可能：http://mrdoob.com/projects/chromeexperiments/ball_pool/

虽然我没有这样做，但从外观上看，似乎并不简单（在上面的例子中，确实使用了 html5 画布，但它在旧浏览器中仍然缺乏一些兼容性，这取决于你想要做什么不过，可能不是问题）

你可以做一些更骇人听闻的技巧，比如用 php+imagemagick 旋转或一个图像有很多旋转，一次只显示一个旋转（使用 css 只显示图像的一部分作为背景）

或者坚持使用闪光灯：/

【讨论】：

【解决方案3】：

您可以使用 CSS3 来旋转图像（和其他元素）。问题是旧浏览器不会应用旋转，并且（目前）您必须使用几个供应商特定的前缀才能在最常见的浏览器中获得旋转（当然不包括 IE - 但支持将在 IE9 中提供）。

示例代码：

-moz-transform: rotate(-20deg); // Firefox
-o-transform: rotate(-20deg); // Opera
-webkit-transform: rotate(-20deg); // Chrome, Safari, etc
transform: rotate(-20deg); // CSS3 standard, to keep it future proof

确保在最后写出标准的，以确保解释这一点而不是供应商特定的。

请注意，这将使您的样式表无效。

如果您将其与 javascript 动画框架（如 Scriptaculous）结合使用，您可以为这些属性设置动画以创建滚动球或其他东西的效果。

【讨论】：