[分享]css中如何让图片旋转180度

CSS中让图片旋转180度是很常见的效果，主要通过transform属性来实现。

transform: rotate(180deg); 

其中，rotate表示旋转，后面的值表示旋转的角度。这里的180deg表示旋转180度。

代码示例:

<style>
  .rotate-img {
    transform: rotate(180deg);
  }
</style>
<img src="example.jpg" alt="example" class="rotate-img"> 

在上面的示例中，我们首先定义了一个.rotate-img类，然后通过设置transform属性，使其图片旋转180度。

需要注意的是，transform属性是CSS3新加入的属性，不同的浏览器对其的支持程度不同。为了兼容各种浏览器，我们可以使用浏览器私有前缀来实现兼容。

-webkit-transform: rotate(180deg); /* Safari 和 Chrome */
-moz-transform: rotate(180deg);    /* Firefox */
-ms-transform: rotate(180deg);     /* IE */
-o-transform: rotate(180deg);      /* Opera */
transform: rotate(180deg);         /* 标准语法 */ 

总之，CSS的transform属性可以很方便地实现图片旋转180度，只需要通过rotate函数设置旋转角度即可。同时，为了兼容各种浏览器，可以使用浏览器私有前缀来实现。