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

html – 如何在CSS中添加旋转图像?,第1张

概述我写了下面的代码.但现在要求图像旋转180度.我怎样才能做到这一点? #cell {background-image: url("../images/logo.PNG"); background-attachment: fixed; background-repeat: no-repeat;background-position: 0px 250px;background-color: 我写了下面的代码.但现在要求图像应旋转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"/>
解决方法 一个跨浏览器的解决方案是
#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

总结

以上是内存溢出为你收集整理的html – 如何在CSS中添加旋转图像?全部内容,希望文章能够帮你解决html – 如何在CSS中添加旋转图像?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1106673.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-28
下一篇2022-05-28

发表评论

登录后才能评论

评论列表(0条)

    保存