Question

我可以使用标准代码在HTML网站中旋转图片吗？

Answer 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

希望有所帮助。