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

Question

我写了下面的代码。但是现在的要求是图片要旋转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"/>

Answer 1

一个跨浏览器的解决方案是

#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