跨浏览器使用CSS旋转图像的方法？

一尘不染

跨浏览器使用CSS旋转图像的方法？

css

我有一个正在处理的网站布局，其中有一个主要的内容区域，然后在内容区域的四个角处的每个角处都有一个角图形。总体效果是台式吸墨纸。

这是我左上角的代码：

.corner-top-left    { width:96px ;
height:96px ;
background:url("images/corner.png") no-repeat ;
position:absolute ;
top:-5px ;
left:-5px ;
z-index:3000 ;
}

我想制作（如果可能的话）而不是制作四个单独的拐角图像，而是使用原始图像（corner.png）并使用CSS旋转它。

有跨浏览器兼容的方法来做到这一点吗？

非常感谢！

阅读 325

2020-05-16

共1个答案

一尘不染

CSS旋转45度：

.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)";

}

2020-05-16