用HTML转换图像,Javascript

时间:2010-08-09 20:27:57

标签: html flash

可以转动图像吗? (跨浏览器,没有插件)

例如滚球,在Flash中很容易,因为HTML5即将来临,必须有一个很好的选择。

3 个答案:

答案 0 :(得分:2)

“转”是指旋转吗?如果是这样,我到目前为止看到的最好的,跨浏览器,正在使用Raphael。它在IE上使用VML,在其他浏览器上使用SVG。请参阅图片rotate demo:http://raphaeljs.com/image-rotation.html

答案 1 :(得分:1)

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

虽然我没有这样做,但从它的外观来看,似乎并不简单(在上面的情况下,确实使用了html5画布,它在旧浏览器中仍然缺乏一些兼容性,具体取决于你想做什么但是,可能不是问题)

你可以做一些更糟糕的技巧,例如用php + imagemagick旋转或一个旋转很多的图像,一次只显示一个旋转(使用css只显示图像的一部分作为背景)

或坚持使用flash:/

答案 2 :(得分:0)

您可以使用 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)结合使用,则可以设置这些属性的动画以创建滚动球或其他内容的效果。