IE 中的 CSS 旋转属性

发布于 2024-10-10 08:44:20 字数 275 浏览 5 评论 0原文

我想将 DIV 旋转到一定程度。在 FF 中它可以正常工作，但在 IE 中我遇到了问题。

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

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

这意味着DIV将旋转到90或180或270或360度。但如果我只需要将 DIV 旋转 20 度，那么它就不再起作用了。

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

原文

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

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

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

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.

How may I solve this problem in IE?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

网白 2024-10-17 08:44:20

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

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，则需要提供这两行代码。

可怕的数字以弧度表示；如果您想使用 45 度以外的角度，您需要自己计算出数字（有教程（如果您在互联网上查找的话）。

另请注意，由于过滤字符串中存在未转义的冒号，IE6/7 语法会给其他浏览器带来问题，这意味着它是无效的 CSS。在我的测试中，这会导致 Firefox 忽略过滤器之后的所有 CSS 代码。这是您需要注意的事情，因为如果您被它抓住，可能会导致数小时的混乱。我通过将 IE 特定的内容放在一个单独的样式表中来解决这个问题，而其他浏览器不会加载这些内容。

当前所有其他浏览器（包括 IE9 和 IE10 — 耶！）都支持 CSS3 transform 样式（尽管通常带有供应商前缀），因此您可以使用以下代码在所有其他浏览器中实现相同的效果：

-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 Sandpaper 允许您使用（接近）标准 CSS 代码进行旋转，即使在旧版 IE 中也是如此。

将 CSS Sandpaper 添加到网站后，您应该能够为 IE6–8 编写以下 CSS 代码：

-sand-transform: rotate(40deg);

比您通常需要在 IE 中使用的传统 filter 样式容易得多。

编辑

另请注意 IE9（且仅 IE9）特有的一个额外怪癖，它支持标准 transform 和旧式 IE -ms-filter。如果您同时指定了这两个选项，则可能会导致 IE9 完全混乱，并在元素本来所在的位置仅呈现一个纯黑框。最好的解决方案是使用上面提到的 Sandpaper polyfill 来避免 filter 样式。

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 */

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.

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

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.

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) */

Edit

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.

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

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

Edit

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.

回复收藏 0 原文

肩上的翅膀 2024-10-17 08:44:20

您需要进行如下矩阵变换：

filter: progid:DXImageTransform.Microsoft.Matrix(
  M11 = COS_THETA,
  M12 = -SIN_THETA,
  M21 = SIN_THETA,
  M22 = COS_THETA,
  sizingMethod = 'auto expand'
);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
  M11 = COS_THETA,
  M12 = -SIN_THETA,
  M21 = SIN_THETA,
  M22 = COS_THETA,
  SizingMethod = 'auto expand'
)";

其中 COS_THETA 和 SIN_THETA 是角度的余弦值和正弦值（即 45° 的 0.70710678）。

You'll need to do a matrix transform as follows:

filter: progid:DXImageTransform.Microsoft.Matrix(
  M11 = COS_THETA,
  M12 = -SIN_THETA,
  M21 = SIN_THETA,
  M22 = COS_THETA,
  sizingMethod = 'auto expand'
);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
  M11 = COS_THETA,
  M12 = -SIN_THETA,
  M21 = SIN_THETA,
  M22 = COS_THETA,
  SizingMethod = 'auto expand'
)";

Where COS_THETA and SIN_THETA are the cosine and sine values of the angle (i.e. 0.70710678 for 45°).

回复收藏 0 原文

安静被遗忘 2024-10-17 08:44:20

有一个名为 IETransformsTranslator 的在线工具。使用此工具，您可以对 IE6、IE7 和 IE6 上有效的矩阵滤波器进行转换。 IE8。只需粘贴 CSS3 变换函数（例如，rotate(15deg)），它就会完成剩下的工作。
http://www.useragentman.com/IETransformsTranslator/

回复收藏 0 原文

雄赳赳气昂昂 2024-10-17 08:44:20

http://css3please.com/

向下滚动到 Microsoft IE9+ 前缀的“.box_rotate”。
这里有类似的讨论：Rotating a Div Element in jQuery

回复收藏 0 原文

剩一世无双 2024-10-17 08:44:20

只是一个提示...在对手机使用“transform:rotate()”甚至“-ms-transform:rotate()”(IE9)之前请三思！

这几天我一直在不断地撞墙。我有一个正在运行的“动态”系统，可以滑动图像，并且在其顶部有一个命令区域。我对箭头按钮进行了“变换”，因此它模拟向上和向下指向...我已经审查了 1000 多行代码很多年了！ ;-)

一切都好，一旦我从CSS中删除了transform:rotate。
与其他浏览器相比，IE 处理它的方式有点棘手（不是用脏话）。

很好的答案@Spudley！谢谢你写它！

回复收藏 0 原文

吐个泡泡 2024-10-17 08:44:20

用于 IE 转换的有用链接

此工具转换CSS3 将属性（几乎所有现代浏览器都使用）转换为使用 Microsoft 专有的视觉过滤器技术的等效 CSS。

回复收藏 0 原文

℉服软 2024-10-17 08:44:20

以 IE11 为例（浏览器类型=Trident 版本=7.0）：

image.style.transform = "rotate(270deg)";

For IE11 example (browser type=Trident version=7.0):

image.style.transform = "rotate(270deg)";

回复收藏 0 原文

~没有更多了~

关于作者

怀念你的温柔

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

IE 中的 CSS 旋转属性

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

编辑

编辑

Edit

Edit

关于作者

相关话题

热门标签

推荐作者

淡笑忘祈一世凡恋

我们的影子

素年丶

南笙

18215568913

qq_xk7Ean

友情链接

IE 中的 CSS 旋转属性

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

编辑

编辑

Edit

Edit

关于作者

相关话题

热门标签

推荐作者

淡笑忘祈一世凡恋

我们的影子

素年丶

南笙

18215568913

qq_xk7Ean

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。