ie9支持css3中的rotate吗?,CSS3转换：旋转;(CSS3 transform: rotate; in IE9)

CSS3转换：旋转;(CSS3 transform: rotate; in IE9)

我有一个元素需要在我所做的设计中是垂直的。 我已经得到了这个CSS，除了IE9以外的所有浏览器都可以使用。 我使用IE7和IE8的过滤器：

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

这似乎使我的元素在IE9中透明化，CSS3'tranform'的porperty似乎没有做任何事情！

有没有人知道在IE9中的旋转元素？

真的很感谢帮忙！

W.

I have an element that needs to be vertical in a design I have done. I have got the css for this to work in all browsers except IE9. I used the filter for IE7 & IE8:

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

This however seems to render my element transparent in IE9 and the CSS3 'tranform' porperty doesn't seem to do anything!

Does anyone know anyway of rotating elements in IE9?

Really appreciate the help!

W.

原文：https://stackoverflow.com/questions/4865167

更新时间：2020-06-20 19:06

最满意答案

标准CSS3旋转应该在IE9中工作，但我相信你需要给它一个供应商的前缀，像这样：

-ms-transform: rotate(10deg);

它可能在beta版本可能不起作用; 如果没有，请尝试下载当前的预览版本(预览7)，这是beta的更新版本。 我没有测试版测试，所以我无法确认是否在该版本。 最终版本肯定是支持它的。

我也可以确认在IE9中已删除了IE特定的filter属性。

[编辑]

人们要求提供进一步的文件。 正如他们所说，这是非常有限的，但我确实发现这个页面： http : //css3please.com/这是有用的测试所有浏览器中的各种CSS3功能。

但是在IE9预览中测试此页面上的旋转功能会使其崩溃相当壮观。

然而，我已经在我自己的测试页面中使用-ms-transform:rotate()在IE9中进行了一些独立的测试，它工作正常。 所以我的结论是这个功能是实现的，但是有一些bug，可能与动态设置有关。

浏览器是www.canIuse.com实现的另一个有用的参考点 - 请参阅http://caniuse.com/#search=rotation

[编辑]

恢复这个旧的答案，因为我最近发现了一个与这个问题相关的一个名为CSS Sandpaper的攻击，可能会使事情更容易。

该hack实现了对于旧版本的IE的标准CSS transform支持。 所以现在您可以将以下内容添加到您的CSS中：

-sand-transform: rotate(10deg);

...并使其在IE 6/7/8中工作，而无需使用filter语法。 (当然，它仍然使用幕后的过滤器语法，但这使得它更容易管理，因为它使用与其他浏览器类似的语法)

Standard CSS3 rotate should work in IE9, but I believe you need to give it a vendor prefix, like so:

-ms-transform: rotate(10deg);

It is possible that it may not work in the beta version; if not, try downloading the current preview version (preview 7), which is a later revision that the beta. I don't have the beta version to test against, so I can't confirm whether it was in that version or not. The final release version is definitely slated to support it.

I can also confirm that the IE-specific filter property has been dropped in IE9.

[Edit]

People have asked for some further documentation. As they say, this is quite limited, but I did find this page: http://css3please.com/ which is useful for testing various CSS3 features in all browsers.

But testing the rotate feature on this page in IE9 preview caused it to crash fairly spectacularly.

However I have done some independant tests using -ms-transform:rotate() in IE9 in my own test pages, and it is working fine. So my conclusion is that the feature is implemented, but has got some bugs, possibly related to setting it dynamically.

Another useful reference point for which features are implemented in which browsers is www.canIuse.com -- see http://caniuse.com/#search=rotation

[EDIT]

Reviving this old answer because I recently found out about a hack called CSS Sandpaper which is relevant to the question and may make things easier.

The hack implements support for the standard CSS transform for for old versions of IE. So now you can add the following to your CSS:

-sand-transform: rotate(10deg);

...and have it work in IE 6/7/8, without having to use the filter syntax. (of course it still uses the filter syntax behind the scenes, but this makes it a lot easier to manage because it's using similar syntax to other browsers)

相关问答

实际上只需将其添加到包含所有元素的网站容器中： -webkit-backface-visibility: hidden; 应该修复它！ 吉诺 Actually just add this to the site container which holds all the elements: -webkit-backface-visibility: hidden; Should fix it! Gino

这只是一个受过教育的猜测，没有看到你的HTML / CSS的其余部分： 你应用了display: block还是display: inline-block ？ 如果没有，尝试。 否则，尝试将CSS3转换规则应用于li 。 This is merely an educated guess without seeing the rest of your HTML/CSS: Have you applied display: block or display: inline-block to li a?

...

标准CSS3旋转应该在IE9中工作，但我相信你需要给它一个供应商的前缀，像这样： -ms-transform: rotate(10deg);

它可能在beta版本可能不起作用; 如果没有，请尝试下载当前的预览版本(预览7)，这是beta的更新版本。 我没有测试版测试，所以我无法确认是否在该版本。 最终版本肯定是支持它的。 我也可以确认在IE9中已删除了IE特定的filter属性。 [编辑] 人们要求提供进一步的文件。 正如他们所说，这是非常有限的，但我确实发现这个页面： http : //c

...

您将需要从矩阵中的值计算每个部分。 我发现的仿射变换的最佳介绍就是这个(尽管它是针对ActionScript的，数学是相同的); http://www.senocular.com/flash/tutorials/transformmatrix/ 或者这个，专门针对CSS： http://dev.opera.com/articles/view/understanding-the-css-transforms-matrix/ You will need to calculate each portio

...

不要多次声明变换(后面的规则总是会获胜)，你应该用这样的空格分隔变换： transform: rotate(80deg) skew(20deg);

在此规则之前，不要忘记所有供应商前缀。 你可以看到W3C工作草案的语法 Instead of declaring the transforms more than once (the later rule always wins), you should separate your transforms by spaces like this: tr

...

IE9或更低版本不支持动画，转换和转换。 IE 10+支持它们，但即使在这种情况下，用户在使用IE时也会遇到很多问题。 最好的办法是使用javascript。 使用javascript，你可以避免CSS3 animations ，甚至在IE中运行你的结果更好。 有关animations, transitions and transformations浏览器兼容性animations, transitions and transformations查看以下链接： https ： //develope

...

我两天前读过，不同的Chrome浏览器可能会使用和不使用-webkit-来呈现不同的CSS3轮换。 更新： 我在Chrome中也有这个问题。 渲染输出很脆弱且不对齐(如图中所示)。 所以我只是尝试应用(在Chrome中) -webkit-filter: opacity(0.999); 或-webkit-filter: blur(0px); 而且它的字体不那么脆，它的渲染和对齐都很好，但在两种情况下都有点模糊。 奇怪。 我认为这适用于任何过滤器。 对于Firefox， -moz-filter不起作用

...

如果我理解你的要求，我相信你只需要在li上设置一致的宽度 - 就像这样： li { width: 5%; } // you may need to play around with this value

这是一个证明的jsfiddle 。 If I understand what you're asking for, I believe you just need to set a consistent width on the li - something like this: li { wi

...

解决了。 Android 2.0设备不支持Transitions。 http://daneden.me/2011/12/putting-up-with-androids-bullshit/ Solved. Android 2.0 Devices do not support Transitions. http://daneden.me/2011/12/putting-up-with-androids-bullshit/

由于您的转换样式是在CSS中声明的，因此您必须从元素中引出计算样式以对其进行修改： var temp = document.querySelector('.temp')

var styles = window.getComputedStyle(temp, null).getPropertyValue('transform');

这里的问题是你将获得矩阵(至少在chrome中)，例如： matrix(1.0555833735058735, 0.07578747639260253, 0.131267

...