如何在CSS中添加旋转图像?

I have written below code. But now the requirement is that the image should be rotated 180 degrees. How can I achieve this?

我写的代码如下。但是现在的要求是图像应该旋转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 tag:

HTML标签:

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

4 个解决方案

#1

One cross-browser solution is

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

#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');
}

Note, that for IE8 and below, the rotation center point is not located in the center of the image (as it happens with all other browsers). So, for IE8 and below, you need to play with negative margins (or paddings) to shift the image up and left.

注意，对于IE8和以下版本，旋转中心点不在图像的中心(就像其他浏览器一样)。因此，对于IE8和以下，你需要使用负边距(或paddings)来改变图像并向左移动。

The element needs to be blocked. Other units that can be used are: 180deg = .5turn = 3.14159rad = 200grad

元素需要被阻塞。其他可以使用的单位是:180deg = .5turn = 3.14159rad = 200grad

4 个解决方案

#1

更多相关文章

随机推荐