我正在开发一个 jQuery 插件,使 block 级元素可以用鼠标旋转。现在它在非 IE 浏览器中按预期工作,但在 Internet Explorer 中旋转时会出现奇怪的行为。
演示托管于 testerski.antaranian.me这里,旋转插件脚本是
$.fn.roll = function(angle){
var $this = this,
ie = !jQuery.support.leadingWhitespace;
if (ie) {
var cosAngle = parseFloat(parseFloat(Math.cos(angle.rad())).toFixed(8)),
sinAngle = parseFloat(parseFloat(Math.sin(angle.rad())).toFixed(8)),
tx = 0, ty = 0,
matrixFilter = '(M11=' + cosAngle + ', '
+ 'M12=' + -sinAngle + ', '
+ 'M21=' + sinAngle + ', '
+ 'M22=' + cosAngle + ','
+ 'sizingMethod=\'auto expand\')',
filter = 'progid:DXImageTransform.Microsoft.Matrix' + matrixFilter,
css = {
'-ms-filter': filter,
'filter': filter
};
debug.log(filter);
var matrix = $M([
[cosAngle, -sinAngle, tx],
[sinAngle, cosAngle, ty],
[0, 0, 1]
]);
debug.log(matrix);
$this.transformOrigin(matrix);
$this.fixIeBoundaryBug(matrix);
} else {
var css = {
'-webkit-transform': 'rotate(' + angle + 'deg)',
'-moz-transform': 'rotate(' + angle + 'deg)',
'-o-transform': 'rotate(' + angle + 'deg)'
};
}
$this.css(css);
return this;
};
我用谷歌搜索并找到了与这个主题相关的这两个页面
据我所知,需要一些与线性代数相关的会计,但这对我来说很难,所以如果有人有更简单的教程,或者知道直接的解决方案,请告诉我。
任何帮助将不胜感激, 安塔拉尼亚人。
最佳答案
不幸的是,IE 的 Transform Filter 没有“transform-origin”的概念。 'auto expand' sizingMethod 将使转换后的对象占用尽可能少的空间,您需要更改它的定位。
在 cssSandpaper 中,我在转换后的对象周围放置了另一个
无论如何,祝你好运!
Z.
关于javascript - jQuery 元素自由旋转。在 IE 中更正 Transform Origin 和 Translate,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5105585/