CSS 旋转图像的跨浏览器方式

在本文中，我们将介绍如何使用CSS在各种浏览器中实现图像旋转的方法。

阅读更多：CSS 教程

常规旋转方法

CSS提供了一个transform属性，可以通过设置rotate值来旋转元素。在大多数现代浏览器中，可以使用以下代码来旋转图像：

img {
  transform: rotate(45deg);
}

这将使图像顺时针旋转45度。但需要注意的是，旋转是相对于图像的中心点进行的。

然而，像Internet Explorer 9及以下版本这样的旧浏览器并不支持transform属性。为了在这些浏览器中实现图像旋转，我们需要使用不同的跨浏览器解决方案。

使用IE滤镜旋转图像

对于不支持CSS transform属性的浏览器，我们可以使用一个称为“DXImageTransform.Microsoft.Matrix”的IE滤镜来实现图像旋转。

img {
  -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');
}

上述代码将使图像顺时针旋转45度，与CSS transform属性的效果相同。

使用Modernizr进行浏览器兼容性检测

如果你需要在项目中同时支持旧浏览器和现代浏览器，可以使用Modernizr来检测浏览器是否支持CSS transform属性。

首先，在head部分引入Modernizr库：

<script src="modernizr.js"></script>

然后，在CSS中使用下面的代码：

.no-csstransforms img {
  -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');
}

这样，当浏览器不支持CSS transform属性时，Modernizr会给根元素添加一个类名为“no-csstransforms”，你可以在此类选择器下定义对应的样式规则。