当前位置: 首页 > 面试题库 >

CSS3转换:旋转;在IE9中

吕德惠
2023-03-14
问题内容

在我完成的设计中,我有一个需要垂直的元素。我已经获得了CSS才能在除IE9之外的所有浏览器中工作。我将过滤器用于IE7和IE8:

progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

但是,这似乎使我的元素在IE9中变得透明,而CSS3的“变形”功能似乎无能为力!

有人知道IE9中旋转元素吗?

非常感谢您的帮助!

W.


问题答案:

标准CSS3旋转应在IE9中工作,但我相信您需要为其指定供应商前缀,如下所示:

  -ms-transform: rotate(10deg);

它可能无法在Beta版本中工作;如果不是,请尝试下载当前的预览版本(预览版7),它是beta版的更高版本。我没有要测试的Beta版本,因此我无法确认它是否在该版本中。最终版本肯定会支持它。

我还可以确认filterIE9中已删除了IE特定的属性。

[编辑]
人们要求提供更多文档。正如他们所说,该页面可用于在所有浏览器中测试各种CSS3功能。

但是在IE9预览版中测试此页面上的旋转功能会导致其崩溃。

但是,我已经-ms-transform:rotate()在自己的测试页中使用IE9
进行了一些独立的测试,并且工作正常。因此,我的结论是该功能已实现,但存在一些错误,可能与动态设置有关。

[编辑]
恢复旧的答案是因为我最近发现了一个名为CSSSandpaper的黑客,该黑客与该问题有关,可能使事情变得更容易。

该黑客transform为IE的旧版本实现了对标准CSS的支持。因此,现在您可以将以下内容添加到CSS中:

-sand-transform: rotate(10deg);

…并且可以在IE6/7/8中工作,而无需使用filter语法。(当然,它仍然使用幕后的过滤器语法,但这使它管理起来容易得多,因为它使用的语法与其他浏览器类似)



 类似资料:
  • 问题内容: 无法使此动画图像正常工作,它应该进行360度旋转。 我猜下面的CSS有点问题,因为它保持静止。 问题答案: 这是 正确的动画CSS: 有关代码的一些注意事项: 您已将关键帧嵌套在规则中,这是不正确的 不适用于绝对定位的元素 看看caniuse:IE10不需要前缀

  • 问题内容: 我在chrome中遇到了css3转换旋转过渡的问题。过渡效果很好,但是在完成过渡后,元素移位了一个像素。另一个奇怪的事情是,它仅在页面居中()时发生。如果同时删除过渡,该错误仍然存​​在。 HTML: CSS: 注释掉该行以使其消失。 任何人都有任何想法如何在保持页面居中的同时停止此操作? 我在OSX 10.6.8上使用版本24.0.1312.57 干杯 问题答案: 实际上,只需将其添

  • #rotate2D,#rotate3D { width: 80px; height: 70px; color: white; position:relative; font-weight:bold; font-size:15px; padding:10px; float:left; margin-right:50px; border-radius:5px; border:1px solid #00

  • #rotate2D,#rotate3D { width:80px; height:70px; color:white; position:relative; font-weight:bold; font-size:15px; padding:10px; float:left; margin-right:50px; border-radius:5px; border:1px solid #00000

  • 旋转变换rotate() 同画圆弧一样,这里的rotate(deg)传入的参数是弧度,不是角度。同时需要注意的是,这个的旋转是以坐标系的原点(0,0)为圆心进行的顺时针旋转。所以,在使用rotate()之前,通常需要配合使用translate()平移坐标系,确定旋转的圆心。即,旋转变换通常搭配平移变换使用的。 最后一点需要注意的是,Canvas是基于状态的绘制,所以每次旋转都是接着上次旋转的基础上

  • 问题内容: 我想使用CSS3属性transform:scale。 有没有办法在Internet Explorer 8及更低版本中模仿它?可能与Java解决方案有关? 我在网上搜索没有任何结果。 非常感谢Vincent 问题答案: IE9支持转换: 对于其他版本的IE,存在复杂的语法。像这样: