跨浏览器使用CSS旋转图像的方式? [英] Cross browser way to rotate image using CSS?

问题描述

我正在处理的网站布局有一个主要内容区域，然后在内容区域的四个角落中的每一个角落都有一个角落图形.这整体效果堪比桌面吸墨纸.

I have a site layout I'm working on that has a main content area and then at each of the four corners of the content area sits a corner graphic. The overall effect is that of a desk blotter.

这是我左上角的代码:

.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.

Rather than make four individual corner images, what I would like to do (if possible) is use the original image (corner.png) and rotate it using CSS.

是否有跨浏览器兼容的方式来做到这一点?

Is there a cross browser compatible way to do this?

非常感谢！

推荐答案

http://jsfiddle.net/tJkgP/2/

CSS 旋转 45 度:

CSS to rotate by 45 degrees:

.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 来自这里:IE 中的 CSS 旋转属性

IE6-8 CSS came from here: CSS rotate property in IE

这篇关于跨浏览器使用CSS旋转图像的方式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！