Html 如何在 CSS 中添加旋转图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8939161/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a rotated image in CSS?
提问by user968880
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"/>
回答by Jose Rui Santos
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 及以下版本，您需要使用负边距（或填充）来向上和向左移动图像。
The element needs to be blocked. Other units that can be used are:
180deg= .5turn= 3.14159rad= 200grad
元素需要被阻塞。可以使用的其它单元有：
180deg= .5turn= 3.14159rad=200grad
回答by ThinkingStiff
If you don't have any text in the <td>you can use transform: rotate(180deg);on it. If you do have text, this will rotate the text too. To prevent that you can put a <div>inside the <td>, put the text inside that, and rotate that 180 degrees (which puts it upright again).
如果您没有任何文本，<td>您可以使用transform: rotate(180deg);它。如果您有文本，这也会旋转文本。为防止出现这种情况，您可以将 a<div>放入 中<td>，将文本放入其中，然后旋转 180 度（使其再次直立）。
Demo: http://jsfiddle.net/ThinkingStiff/jBHRH/
演示：http: //jsfiddle.net/ThinkingStiff/jBHRH/
HTML:
HTML：
<table>
<tr><td width="20%" id="cell"><div>right-side up<div></td></tr>
</table>
CSS:
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);
}
Output:
输出：
回答by Florian Rachor
You can use CSS3 for this, but there are some browser issues:
您可以为此使用 CSS3，但存在一些浏览器问题：
transform: rotate(180deg);
Also look here: CSS3 rotate alternative?
也看看这里：CSS3旋转替代？
回答by Aashish
You can also try this axial type rotation OR rotation on Z-axis.
您也可以在 Z 轴上尝试这种轴向类型的旋转或旋转。
.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);
}<div class="box"></div>