4

有没有办法在 IE 中旋转元素？我目前正在使用：

  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

旋转元素，除了 IE 之外，几乎所有浏览器都可以使用它，并且从我读过的内容来看，IE 不支持此功能。有没有其他选择？例如 JavaScript 或其他将启用旋转的 css 属性。

4

5 回答 5

4

您可以使用：

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

旋转的值可以是 1、2、3 或 4。这些数字分别代表 90、180、270 或 360 度的旋转。

不幸的是，这种技术仅支持以 90 度为增量的旋转，这在尝试执行某些类型的动画或悬停在效果上时肯定很烦人。

您还可以查看不太容易使用的matrix过滤器以了解其他旋转效果。这是一个很好的翻译工具来帮助你：

http://www.useragentman.com/IETransformsTranslator/

于 2012-05-29T15:42:30.877 回答
4

我最近在 IE7 和 8 中需要这个，并决定通过编写一小段 JavaScript 来处理计算 IE 特定矩阵值和偏移量的麻烦。

脚本的想法和解释来自这些链接：

http://www.boogdesign.com/examples/transforms/matrix-calculator.html

http://extremelysatisfactorytotalitarianism.com/blog/?p=1002

这是脚本（我使用节点运行它，但您也可以在浏览器的控制台中通过它）：

// --- initialization

var w = 712;  // object width
var h = 744;  // object height
var deg = 48; // object rotation in degrees

// --- utils

function deg2rad(deg) {
    return deg * (2 * Math.PI) / 360;
}

var rad = deg2rad(deg);

// --- from http://www.boogdesign.com/examples/transforms/matrix-calculator.html

var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);

var a = parseFloat(costheta).toFixed(8);
var c = parseFloat(-sintheta).toFixed(8);
var b = parseFloat(sintheta).toFixed(8);
var d = parseFloat(costheta).toFixed(8);

console.log('-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=' + a + ', M12=' + c + ', M21=' + b + ', M22=' + d + ', sizingMethod=\'auto expand\')";');
console.log('filter: progid:DXImageTransform.Microsoft.Matrix(M11=' + a + ', M12=' + c + ', M21=' + b + ', M22=' + d + ', sizingMethod=\'auto expand\');');

// --- from http://extremelysatisfactorytotalitarianism.com/blog/?p=1002

// calculate bounding box width and height
var bb_w = Math.abs(h * Math.sin(rad)) + Math.abs(w * Math.cos(rad));
var bb_h = Math.abs(h * Math.cos(rad)) + Math.abs(w * Math.sin(rad));

// calculate offsets
var offset_left = Math.floor((w / 2) - (bb_w / 2));
var offset_top = Math.floor((h / 2) - (bb_h / 2));

console.log('left: ' + offset_left + 'px;');
console.log('top: ' + offset_top + 'px;');
于 2012-09-20T14:04:11.717 回答
2 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

你可以在这里阅读

在此处输入图像描述

于 2012-05-29T15:40:59.557 回答
2

试试这个，

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

还有一个不错的 jQuery 插件，

jQuery旋转

PS代码限制为 90 度旋转但不是插件

于 2012-05-29T15:45:04.300 回答
1

您可以使用过滤器：

filter: progid:DXImageTransform.Microsoft.Matrix(...);

Matrix 的优点是您可以旋转任意度数，但您需要矩阵值。幸运的是，有一个工具可以做到这一点：

http://css3please.com/

编辑：如果你想用 JS 做一些花哨的东西，矩阵条目可以很容易地计算出来：

http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx

于 2012-05-29T15:41:24.927 回答