如何在我的网站上旋转图片？答案

【问题标题】：How can I rotate pictures on my website?如何在我的网站上旋转图片？
【发布时间】：2011-07-07 12:07:34
【问题描述】：

是否有标准代码可用于在我的 HTML 网站中旋转图片？

【问题讨论】：

您的意思是在编辑方面轮换？你用谷歌搜索过吗？
是的编辑。我用谷歌搜索了很多不同的代码，根本不相似
有数百个 javaScript 库可供选择，它们使用 jQuery/MoooooTools.. 一些 API 站点.. 然后你得到 HTML5/CSS3 .. 对于所有浏览器来说都不是简单的.. soz
我使用的是 mac，文本管理员，我是这个 html 编码的菜鸟/初学者。我需要在我的网站代码中放置一个代码，这样我的一些图片就会朝上而不是倾斜。

【解决方案1】：

CSS3 有一个transform 样式，它允许您旋转任何HTML 元素。你可以这样使用它：

.myelement {
    transform:rotate(45deg);
}

这应该适用于大多数浏览器的最新版本（Firefox 5、Chrome 13、IE9 等）。但是，较旧的浏览器会出现问题。

一些较旧的浏览器需要供应商前缀，因此您需要 -moz-transform 和 -webkit-transform 等。

旧版本的 IE 根本不支持 transform 样式，但它们确实有一个 filter 属性可以代替使用。不幸的是，IE 的旋转过滤语法相当复杂。您必须指定一个矩阵变换，其值以弧度而不是度数为单位，所以它可能有点晦涩。

对于 45 度旋转，您将使用以下代码：

.myelement {
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand')";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand');
}

您会注意到 IE6 和 IE7 需要 filter 样式，而 IE8 需要 -ms-filter（语法略有不同）。

这里不解释了，我给你指一个详细解释的页面：http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

关于filter 样式的最后一点注意事项：IE6/7 语法是无效的 CSS（由于 progid 后面的冒号等原因）。我已经看到它实际上导致其他浏览器（特别是 Firefox 3.6）无法解析整个样式表。出于这个原因，我建议在单独的特定于 IE 的样式表中使用它，您可以将其完全从其他浏览器中排除。

如果您想通过 Javascript 来实现，我建议您使用 JQuery 插件。这将消除必须为所有不同浏览器编写单独代码的复杂性。更多信息请看这里：http://plugins.jquery.com/plugin-tags/rotate

希望对您有所帮助。

【讨论】：

根据下面 robertc 的评论，对于 IE 中使用 filter 的 CSS 旋转，请参阅 boogdesign.com/examples/transforms/matrix-calculator.html
@Paul - boogdesign 页面非常适合为 IE 生成工作样式，但它也为所有其他浏览器生成矩阵转换。当然，这确实意味着它在所有浏览器中都是相同的数字，但是根据我的回答，rotate() 转换不会简单得多吗？（而且浏览器的工作量可能更少）。
哦，是的，rotate() 绝对更简单。但是如果人们也想在 IE8 中提供轮换功能，他们确实需要了解 filter 的内容，所以（直到较旧的 IE 消亡）值得一提。（是否值得使用 filter 取决于项目的上下文。）

【解决方案2】：

您可以在客户端（在浏览器中）或服务器端（在您的服务器中，然后将图像重新发送到浏览器）旋转图像。

要在浏览器上旋转，请参阅 Spudley 的回答。

服务器上的常用方法是使用imagemagick 大多数网络语言/框架都包含绑定，以便轻松使用图像魔法。例如这里是PHP version。

A list 适用于许多不同的语言。

您可以使用 Ajax 技术为用户旋转图像，而无需刷新页面。

【讨论】：

【解决方案3】：

我相信对旋转 HTML 元素的唯一支持是由 CSS 转换提供的。

它们是由 WebKit 团队发明的（我认为）：

http://www.webkit.org/blog/130/css-transforms/

现在其他浏览器也支持：

http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

【讨论】：