Question

我想知道是否有任何方法可以动态旋转图像或使用客户端解决方案反转图像？我不在乎它是否是普通的旧javascript，jquery插件，css。我只是想知道是否有一些方法可以在客户端动态执行此操作，而不必为每个图像编写服务器端代码，我可以这样做。

我尝试在Google上搜索不同的关键字但找不到任何内容。

编辑：我正在寻找一种不需要HTML 5的任何解决方案。

Answer 1

Firefox，Safari和Opera支持：

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);

你也可以在IE8中做到这一点，甚至可能是7（？）：

position: absolute;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

使用JS：

旋转元素

var deg = 90
$('element').style.MozTransform = 'rotate(' + deg + 'deg)';
$('element').style.WebkitTransform = 'rotate(' + deg + 'deg)';

编辑：

哇，根据http://msdn.microsoft.com/en-us/library/ms532972%28VS.85%29.aspx，旋转适用于IE 5.5！

Answer 2

非常有趣的JavaScript解决方案： http://www.stableflow.com/downloads/jquery-plugins/360-degrees-product-view/ 想象一下，您正在运营一些商店或博客，并向用户展示您的产品。该解决方案允许您通过脚本以非常逼真的形式节省空间并呈现产品视图。它允许忘记闪存（所有移动设备仍然不支持）。你需要利用它是：

下载免费插件（使用上面的链接）
使用说明
为每件产品创建并添加一系列图像（图像越多，旋转效果越好）
引起用户对您产品的兴趣

它真的对我有用。在Android手机（lg p500），iPad和iPod touch上进行了测试。

Answer 3

您可以使用canvas元素执行此操作，如图here所示。我并非100％确定所有浏览器都支持它。它是HTML5的一部分（在Wikipedia上详细了解它），因此FF，Safari和Chrome都支持它。对IE8不确定。

如何使用客户端解决方案旋转图像

3 个答案: