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

Posted 2023-03-06

【中文标题】跨浏览器使用CSS旋转图像的方式？

【英文标题】：Cross browser way to rotate image using CSS?

【发布时间】：2012-08-03 15:37:56

【问题描述】：

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

这是我左上角的代码：

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

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

非常感谢！

【问题讨论】：

谷歌搜索会给你答案：answers.oreilly.com/topic/1004-how-to-rotate-an-image-with-css

我先搜索了谷歌。在我查看的前 10 个页面结果中，该链接没有出现在任何地方（搜索词是“css 旋转背景图片”）。由于我确实看到的许多示例都不是跨浏览器兼容的，所以我来到这里。谢谢链接。

您最好使用 4 个不同的图像，因为 CSS 转换在 IE 7 和 IE 8 中不起作用。

感谢您的警告，Ihor。在 IE8 中，旋转效果很好，但它对我图像的阴影透明度产生了影响。嘎。然后是单独的图像:)

为什么不制作包含四个角的单个图像并使用偏移量仅显示所需的一个？我看到这种技术一直在使用。

【参考方案1】：

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

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

IE6-8 CSS 来自这里：CSS rotate property in IE

【讨论】：

这对于其中没有透明元素的图像非常有用！谢谢 :) 我之所以做出这样的区分，只是因为我检查了 IE8 中的 jfiddle，它在玩地狱的阴影和透明度。不过，这对你来说是 IE。再次感谢！

这正是 CSS 糟糕的原因。缺乏标准就是标准。

@janek37 它缺乏并且在这种情况下明确没有标准。最好有一个标准的rotate(45deg); 作为所有浏览器特定的横幅。

很高兴知道行为 htc 文件来自哪里......以及在指示的脚本中扮演什么角色。