CSS中的旋转属性 [英] CSS rotate property in IE

问题描述

我想旋转DIV到一定程度。

I want to rotate the DIV to a certain degree. In FF it functions but in IE I am facing a problem.

例如在下面的样式中我可以设置rotation = 1到4

For example in the following style I can set rotation=1 to 4

 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

这意味着DIV将被旋转到90或180或270或360度。

This means that the DIV will be rotated to 90 or 180 or 270 or 360 degree. But if I need to rotate the DIV only 20 degrees, then it doesn't work anymore.

我如何在IE中解决这个问题？

How may I solve this problem in IE?

推荐答案

要在IE中旋转45度，您需要在样式表中使用以下代码：

To rotate by 45 degrees in IE, you need the following code in your stylesheet:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

从上面注意到IE8对IE6 / 7有不同的语法。你需要提供两行代码，如果你想支持所有版本的IE。

You’ll note from the above that IE8 has different syntax to IE6/7. You need to supply both lines of code if you want to support all versions of IE.

Radians中可怕的数字;如果您想使用45度以外的角度（需要

The horrible numbers there are in Radians; you’ll need to work out the figures for yourself if you want to use an angle other than 45 degrees (there are tutorials on the internet if you look for them).

另请注意，IE6 / 7语法会导致其他浏览器出现问题由于过滤字符串中的非转义的冒号符号，这意味着它是无效的CSS。在我的测试中，这导致Firefox忽略过滤器之后的所有CSS代码。这是你需要注意的，因为它可能会导致混乱的时候，如果你被抓住了。

Also note that the IE6/7 syntax causes problems for other browsers due to the unescaped colon symbol in the filter string, meaning that it is invalid CSS. In my tests, this causes Firefox to ignore all CSS code after the filter. This is something you need to be aware of as it can cause hours of confusion if you get caught out by it. I solved this by having the IE-specific stuff in a separate stylesheet which other browsers didn’t load.

所有其他目前的浏览器（包括IE9和IE10 - yay！）支持CSS3 transform style（尽管经常使用供应商前缀），因此您可以使用以下代码在所有其他浏览器中实现相同的效果：

All other current browsers (including IE9 and IE10 — yay!) support the CSS3 transform style (albeit often with vendor prefixes), so you can use the following code to achieve the same effect in all other browsers:

-moz-transform: rotate(45deg);  /* FF3.5/3.6 */
-o-transform: rotate(45deg);  /* Opera 10.5 */
-webkit-transform: rotate(45deg);  /* Saf3.1+ */
transform: rotate(45deg);  /* Newer browsers (incl IE9) */

希望有帮助。

因为这个答案还在起床，我觉得我应该更新一个叫做 CSS砂纸，可让您

Since this answer is still getting up-votes, I feel I should update it with information about a JavaScript library called CSS Sandpaper that allows you to use (near) standard CSS code for rotations even in older IE versions.

在您的网站中添加CSS砂纸后，您应该可以编写以下内容CSS代码为IE6-8：

Once you’ve added CSS Sandpaper to your site, you should then be able to write the following CSS code for IE6–8:

-sand-transform: rotate(40deg);

比传统的过滤器通常需要在IE中使用。

Much easier than the traditional filter style you'd normally need to use in IE.

只支持IE9），它支持标准 transform 和旧样式IE -ms-filter 。如果你有两个指定，这可能导致IE9完全混乱，渲染一个坚实的黑盒子，元素本来是。最好的解决方法是通过使用上面提到的Sandpaper polyfill避免过滤器风格。

Also note an additional quirk specifically with IE9 (and only IE9), which supports both the standard transform and the old style IE -ms-filter. If you have both of them specified, this can result in IE9 getting completely confused and rendering just a solid black box where the element would have been. The best solution to this is to avoid the filter style by using the Sandpaper polyfill mentioned above.

这篇关于CSS中的旋转属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！