Html 如何在CSS中添加旋转图像？

我已经写了下面的代码。但现在的要求是图像应该旋转180度。我怎样才能做到这一点

#cell {
background-image: url("../images/logo.PNG"); 
background-attachment: fixed; 
background-repeat: no-repeat;
background-position: 0px 250px;
background-color: #FFFFFF;
border-left: 2px;
}

HTML标记：

    <td width="2%" id="cell"/>

---

如果

中没有任何文本，可以使用

变换：旋转（180度）在上面。如果您有文本，这也会旋转文本。为了防止出现这种情况，您可以将
放在
内，将文本放在其中，然后将其旋转180度（这会使其再次直立）

演示：

HTML:


正面朝上

CSS:

#单元{
背景图片：url(http://thinkingstiff.com/images/matt.jpg); 
背景重复：无重复；
背景尺寸：包含；
颜色：白色；
高度：150像素；
变换：旋转（180度）；
宽度：100px；
}
#细胞组{
变换：旋转（180度）；
}

输出：

您可以使用CSS3进行此操作，但存在一些浏览器问题：

transform: rotate(180deg);

另请看这里：
一个跨浏览器解决方案是

#cell {
  -webkit-transform: rotate(180deg);     /* Chrome and other webkit browsers */
  -moz-transform: rotate(180deg);        /* FF */
  -o-transform: rotate(180deg);          /* Opera */
  -ms-transform: rotate(180deg);         /* IE9 */
  transform: rotate(180deg);             /* W3C compliant browsers */

  /* IE8 and below */
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand');
} 

请注意，对于IE8及以下版本，旋转中心点不位于图像的中心（与所有其他浏览器一样）。因此，对于IE8及以下版本，您需要使用负边距（或填充）来上下移动图像

该元素需要被阻止。可使用的其他装置有：
180deg
=
.5turn
=
3.14159rad
=
200grad
您也可以尝试这种轴向旋转或Z轴旋转


.box{
背景：url（'http://aashish.coolpage.biz/img/about/7.jpg');
宽度：200px；
高度：200px；
过渡：变换。5s线性；
变换样式：保留-3D；
}
.box:悬停{
变换：旋转（180度）；
}
你不能在图像处理程序（GIMP、PhotoShop等）中执行此操作，还是需要将原始图像保持原样？这可能会帮助你我确实理解为什么这些都是一样的：180度，.5度和3.14159弧度，但我不明白为什么200rad和其他的一样，有人能解释吗？@Kevkong抱歉，这是一个打字错误。我的意思是
200grad
。谢谢你指出这一点哦，我无意指出这一点。我真的很感兴趣，但当你写“grad”的时候，我想起了我从学校回来的数学课，用谷歌搜索回答了我的问题。看看2019年新浏览器是如何实现的，会很有趣。我认为我们不再需要支持IE8及以下版本了。@MahinKhan现在大多数浏览器都理解
转换。这意味着，在每个CSS属性前面加上供应商前缀的旧习惯是一个经得起未来考验的概念，我们今天看到它仍然有效。事实上，仅仅因为大多数浏览器不再需要这些前缀，就不应该做任何更改，因为并不是每个用户都升级他们的浏览器。