我有一个我正在处理的网站布局,它有一个主要内容区域,然后 内容区域的四个 Angular 各有一个 Angular 图形。这 整体效果就像桌面吸墨纸。
这是我左上角的代码:
.corner-top-left { width:96px ;
height:96px ;
background:url("images/corner.png") no-repeat ;
position:absolute ;
top:-5px ;
left:-5px ;
z-index:3000 ;
}
与其制作四个单独的 Angular 图像,不如我想做的 (如果可能)使用原始图像(corner.png)并使用旋转它 CSS。
是否有跨浏览器兼容的方式来做到这一点?
非常感谢!
最佳答案
旋转 45 度的 CSS:
.desk
{
width: 50%;
height: 400px;
margin: 5em auto;
border: solid 1px #000;
overflow: visible;
}
.desk img
{
behavior:url(-ms-transform.htc);
/* Firefox */
-moz-transform:rotate(45deg);
/* Safari and Chrome */
-webkit-transform:rotate(45deg);
/* Opera */
-o-transform:rotate(45deg);
/* IE9 */
-ms-transform:rotate(45deg);
/* IE6,IE7 */
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";
}
IE6-8 CSS 来自这里:CSS rotate property in IE
关于css - 使用 CSS 旋转图像的跨浏览器方式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11832131/