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

前端之家收集整理的这篇文章主要介绍了html – 如何在CSS中添加旋转图像?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我写了下面的代码.但现在要求图像应旋转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;
}@H_502_3@ 
 

HTML标签

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

解决方法

一个跨浏览器的解决方案是
#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');
}@H_502_3@ 
 

请注意,对于IE8及更低版本,旋转中心点不位于图像的中心(与所有其他浏览器一样).因此,对于IE8及以下版本,您需要使用负边距(或填充)来向上和向左移动图像.

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

原文链接:https://www.f2er.com/html/231803.html

猜你在找的HTML相关文章