如何在CSS中添加旋转的图像？ [英] How to add a rotated image in CSS?

问题描述

我写了下面的代码。但现在的要求是图像应该旋转180度。如何实现这一目标？

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

#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"/>

推荐答案

一种跨浏览器解决方案是

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

注意，对于IE8及以下版本，旋转中心点不在图像的中心（如同所有其他浏览器一样）。因此，对于IE8及以下版本，您需要使用负边距（或paddings）来向上和向左移动图片。

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.

元素需要被阻止。可以使用的另一个单位是：
180deg = .5turn = 3.14159 rad = 200rad

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

这篇关于如何在CSS中添加旋转的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！