如何在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

Answer 2

如果<td>中没有任何文字，您可以使用transform: rotate(180deg);。如果你有文字，这也会旋转文字。为了防止您将<div>放在<td>内，请将文本放在其中，并将其旋转180度（这会使其再次直立）。

演示：http://jsfiddle.net/ThinkingStiff/jBHRH/

HTML：

<table>
    <tr><td width="20%" id="cell"><div>right-side up<div></td></tr>
</table>

CSS：

#cell {
    background-image: url(http://thinkingstiff.com/images/matt.jpg); 
    background-repeat: no-repeat;
    background-size: contain;
    color: white;
    height: 150px;
    transform: rotate(180deg);
    width: 100px;
}

#cell div {
    transform: rotate(180deg);        
}

输出：

Answer 3

您可以使用CSS3，但有一些浏览器问题：

transform: rotate(180deg);

另见：CSS3 rotate alternative?

Answer 4

您也可以尝试在Z轴上进行轴向旋转或旋转。

＆＃13;

＆＃13;

.box {
  background: url('http://aashish.coolpage.biz/img/about/7.jpg');
  width: 200px;
  height: 200px;
  transition: transform .5s linear;
  transform-style: preserve-3D;
}

.box:hover {
  transform: rotateY(180deg);
}

＆＃13;

<div class="box"></div>

＆＃13;

＆＃13;

＆＃13;