IE中的CSS旋转属性

5uzkadbs  于 2022-12-27  发布在  其他
关注(0)|答案(7)|浏览(168)

我想把DIV旋转到一定程度。在FF中它起作用,但在IE中我面临着一个问题。
例如,在下面的样式中,我可以设置rotation=1到4

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

这意味着DIV将旋转到90度、180度、270度或360度。但如果我只需要将DIV旋转20度,它就不再工作了。
我怎样才能在IE中解决这个问题?

cnjp1d6j

cnjp1d6j1#

要在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度以外的Angular ,你需要自己计算出这些数字(如果你在网上找的话,有tutorials)。
还要注意,IE6/7语法会导致其他浏览器出现问题,因为过滤器字符串中有未转义的冒号符号,这意味着它是无效的CSS。这会导致Firefox忽略过滤器后的所有CSS代码。这是你需要注意的事情,因为如果你被它抓住,它会导致几个小时的混乱。我解决了这个问题,让IE-其他浏览器未加载的单独样式表中的特定内容。
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) */

编辑

由于这个答案仍然得到了支持票,我觉得我应该更新它与JavaScript库的信息称为CSS砂纸,允许您使用(接近)标准的CSS代码进行旋转,即使在旧的IE版本。
一旦你在你的网站上添加了CSS砂纸,你就可以为IE6 - 8编写下面的CSS代码了:

-sand-transform: rotate(40deg);

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

编辑

另外,请注意IE9的另一个特殊之处(仅IE9),它同时支持标准transform和旧式IE -ms-filter。如果同时指定了这两种类型,这会导致IE9完全混乱,并且只呈现一个实心的黑盒子,而元素本来应该在这个黑盒子里。最好的解决方案是通过使用上面提到的砂纸polyfill来避免filter样式。

a1o7rhls

a1o7rhls2#

您需要执行矩阵变换,如下所示:

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是Angular 的余弦值和正弦值(即45°时为0.70710678)。

3htmauhk

3htmauhk3#

有一个在线工具叫做IETransformsTranslator。用这个工具你可以进行IE6,IE7和IE8上的矩阵过滤转换。只需要粘贴你的CSS3转换函数(例如旋转(15deg)),它就会完成剩下的工作。http://www.useragentman.com/IETransformsTranslator/

h9vpoimq

h9vpoimq4#

http://css3please.com/
向下滚动到Microsoft IE9+前缀的.“box_rotate”。此处有类似的讨论:Rotating a Div Element in jQuery

v09wglhw

v09wglhw5#

提示一下...使用"转换"之前请三思:rotate()",甚至是"-ms-transform:rotate()"(IE9)!
几天来,我一直在拼命地敲墙。我有一个"动态"系统,它能滑动图像,在它上面有一个命令区。我对一个箭头按钮做了"变换",使它模拟上下指向......我已经检查了1000多行代码很久了!!! -)
一切都好,一旦我从CSS中删除了transform:rotate,IE处理它的方式与其他浏览器相比有点(不要用脏话)棘手。
回答得好@Spudley!谢谢你写这篇文章!

4urapxun

4urapxun6#

***Usefull Link***用于IE转换

此工具使用Microsoft专有的Visual Filters技术将CSS3 Transform属性(几乎所有现代浏览器都使用)转换为等效的CSS。

qlvxas9a

qlvxas9a7#

对于IE11示例(浏览器类型=Trident版本=7.0):

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

相关问题