图像方向 CSS

CSS 中，我们可以使用 transform 属性来改变元素的位置、大小、形状、方向等，其中包括图像方向。本文将介绍如何使用 CSS 实现图像的旋转、翻转等效果，以及相关的浏览器支持情况。

旋转

通过 CSS 的 transform 属性，我们可以将元素旋转一定角度。例如，将图片向左旋转 45 度：

img{
  transform: rotate(-45deg);
}

此外，我们还可以使用 transform-origin 属性来指定旋转中心的位置，例如将图片以右下角为中心顺时针旋转 90 度：

img{
  transform: rotate(90deg);
  transform-origin: bottom right;
}

翻转

通过 CSS 的 transform 属性，我们也可以将元素水平或垂直翻转。例如，将图片水平翻转：

img{
  transform: scaleX(-1);
}

将图片垂直翻转：

img{
  transform: scaleY(-1);
}

此外，我们还可以同时进行水平和垂直翻转：

img{
  transform: scale(-1, -1);
}

3D 旋转

除了 2D 的旋转和翻转，我们还可以使用 CSS 的 perspective 和 transform-style 属性进行 3D 旋转。例如，将图片以 Z 轴为中心旋转：

img{
  transform: rotateZ(45deg);
  perspective: 500px;
  transform-style: preserve-3d;
}

浏览器支持

大多数现代浏览器都支持 CSS transform 属性和各种旋转、翻转效果，但对于一些较老的浏览器则可能存在兼容性问题，特别是对于 3D 旋转的支持。需要注意的是，transform-origin 属性在一些较旧的浏览器中可能会表现为“失效”的情况，因此需要做好兼容性处理。

总的来说，通过 CSS 的 transform 属性，我们可以实现简单地图像旋转、翻转、3D 旋转等效果，从而给页面带来更加丰富的视觉效果。