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

问题描述

我有一个网站的布局我的工作，有一个主要内容区域，然后
在每个内容区域的四个角的坐在一个角落的图形。该
整体效果是一个办公桌吸墨纸。

下面是code为我的左上角：

  .corner-左上角{宽度：96PX;
高度：96PX;
背景：网址（图像/ corner.png）不重复;
位置：绝对的;
顶部：-5px;
左：-5px;
的z-index：3000;
}
 

而不是让四个单项角的图像，我想做些什么
（如果可能）是使用原来的图像（corner.png），并使用旋转
CSS。

有一个跨浏览器兼容的方式做到这一点？

非常感谢！

解决方案

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

CSS来旋转45度：

  .desk
{
    宽度：50％;
    高度：400像素;
    保证金：5em的汽车;
    边框：1px的固体＃000;
    溢出：可见;
}
.desk IMG
{
    行为：网址（-ms-transform.htc）;
    /* 火狐 */
    -moz-变换：旋转（45deg）;
    / * Safari和Chrome * /
    -webkit-变换：旋转（45deg）;
    / * *歌剧/
    -o变换：旋转（45deg）;
    / * * IE9 /
    -ms变换：旋转（45deg）;
    / * IE6，IE7 * /
    过滤：进程id：DXImageTransform.Microsoft.Matrix（sizingMethod ='自动展开'，M11 = 0.7071067811865476，M12 = -0.7071067811865475，M21 = 0.7071067811865475，M22 = 0.7071067811865476）;
    / * * IE8 /
    -ms过滤器进程id：DXImageTransform.Microsoft.Matrix（SizingMethod ='自动展开'，M11 = 0.7071067811865476，M12 = -0.7071067811865475，M21 = 0.7071067811865475，M22 = 0.7071067811865476）;}
 

IE6-8 CSS从这里走过： CSS旋转在IE

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.

Here is the code for my top left hand corner:

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

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?

Many thanks!

解决方案

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

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 came from here: CSS rotate property in IE

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