CSS在IE中旋转属性

Question

我想将DIV旋转到一定程度.在FF中它起作用但在IE中我遇到了问题.

例如,在以下样式中,我可以将rotation = 1设置为4

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

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

我怎么能在IE中解决这个问题？

Answer 1

要在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,则需要提供两行代码.

Radians中有可怕的数字; 如果你想使用45度以外的角度,你需要自己计算出数字(如果你找到它们,互联网上有教程).

另请注意,由于过滤字符串中未转义的冒号符号,IE6/7语法会导致其他浏览器出现问题,这意味着它是无效的CSS.在我的测试中,这会导致Firefox在过滤后忽略所有CSS代码.这是你需要注意的事情,因为如果你被它抓住会造成数小时的混乱.我通过将IE特定的东西放在其他浏览器未加载的单独样式表中来解决这个问题.

所有其他当前浏览器(包括IE9和IE10 - yay!)都支持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的JavaScript库的信息来更新它,它允许你使用(附近)标准CSS代码进行轮换,即使在旧的IE版本中也是如此.

一旦您将CSS Sandpaper添加到您的站点,您就应该能够为IE6-8编写以下CSS代码:

-sand-transform: rotate(40deg);

比filter你通常需要在IE中使用的传统风格容易得多.

编辑

还要注意一个额外的怪癖,特别是IE9(和IE9),它支持标准transform和旧式IE -ms-filter.如果你同时指定了这两个,这可能会导致IE9完全混淆,并且只渲染一个实体黑盒子.对此最好的解决方案是filter使用上面提到的砂纸填充物来避免样式.

Answer 2

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

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是角度的余弦值和正弦值(即0.7071067845°).

Answer 3

存在一个名为IETransformsTranslator的在线工具.使用此工具,您可以进行矩阵过滤器转换,适用于IE6,IE7和IE8.只需粘贴CSS3转换功能(例如旋转(15度)),它将完成剩下的工作. http://www.useragentman.com/IETransformsTranslator/

Answer 4

http://css3please.com/

向下滚动到".box_rotate"以获取Microsoft IE9 +前缀.这里类似的讨论:在jQuery中旋转Div元素