首页 > web前端 > css教程 > 如何使用 CSS3 Transform 旋转 IE9 中的元素?

如何使用 CSS3 Transform 旋转 IE9 中的元素?

Mary-Kate Olsen
发布: 2024-11-03 18:12:03
原创
929 人浏览过

How to Rotate Elements in IE9 using CSS3 Transform?

IE9 中的 CSS3 变换:旋转

本文旨在解决在 IE9 中旋转元素的问题。

问题

在设计中,我们需要一个垂直元素。虽然 CSS 在所有浏览器中都能正常工作,但 IE9 除外。我们在 IE7 和 IE8 中使用了 filter 属性:

progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
登录后复制

然而,这会导致元素在 IE9 中变为透明,CSS3 的“变换”属性似乎没有任何作用!

答案

标准的 CSS3 旋转应该可以在 IE9 中使用,但我们认为需要添加供应商前缀,如下所示:

-ms-transform: rotate(10deg);
登录后复制

它可能无法在测试版中使用;如果不是,请尝试下载当前预览版(预览 7),这是比测试版更新的版本。我们没有测试版的测试版本,因此无法确认它是否在该版本中。最终版本绝对会被计划支持它。

我们还可以确认 IE9 中已经删除了 IE 特定的 filter 属性。

进一步的文档

据说这是非常有限的,但我们确实找到了这个页面:http://css3please.com/,它对于在所有浏览器中测试各种 CSS3 功能很有用。

但在 IE9 预览中测试此页面上的旋转功能会导致它崩溃得很惨烈。

然而,我们在自己的测试页面中对 -ms-transform:rotate() 在 IE9 中进行了独立测试,并且它工作得很好。因此,我们的结论是该功能已经实现,但有一些错误,可能与动态设置有关。

用于确定哪些功能在哪些浏览器中实现的另一个有用的参考点是 www.canIuse.com -- 参见 http://caniuse.com/#search=rotation

最近更新

重新给出这个旧答案,因为我们最近了解到了一种名为 CSS Sandpaper 的破解方法,它与问题有关,可能会让事情变得更简单。

该破解方法为旧版本的 IE 实施了对标准 CSS 变换的支持。因此,现在可以将以下内容添加到你的 CSS 中:

-sand-transform: rotate(10deg);
登录后复制

...并且让它在 IE 6/7/8 中工作,而无需使用 filter 语法。(当然,它仍然在幕后使用 filter 语法,但这通过使用类似于其他浏览器语法的语法的处理,变得更加容易。)

以上是如何使用 CSS3 Transform 旋转 IE9 中的元素?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板