在 IE 原点问题中使用 CSS3 变换：旋转答案

【问题标题】：using CSS3 transform:rotate in IE origin problem在 IE 原点问题中使用 CSS3 变换：旋转
【发布时间】：2012-08-22 20:16:22
【问题描述】：

我正在开发一个使用新 CSS3 transform:rotate(180deg) 功能的项目。每个现代浏览器都有自己的标签，但确实支持它。只有 IE（当然）没有。但是使用过滤器可以实现相同的目标。 唯一的问题是，IE 像 CSS3 一样使用另一个原点。 我的猜测是，通过一些数学可以使原点居中，但我就是不明白（我的数学是不像以前那样）。

代码和示例可以在这里找到：http://jsbin.com/adiwa3/2。在 url (http://jsbin.com/adiwa3/2/edit) 后面添加 /edit 应该会打开编辑器进行测试。在 IE 中检查以查看问题，并在另一个现代浏览器中查看所需的结果。

当前修复（错误地）问题的部分是 if(i==#){...} 之间的部分，应该将其更改为一些数学，因为 li 的数量可以改变。

我希望有人可以帮助我解决这个问题。谢谢你。

【问题讨论】：

标签： javascript math internet-explorer css

【解决方案1】：

我发现这个项目用于跨浏览器转换http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/。尝试分析代码以了解它在 IE 中的行为（或直接下载脚本:)）。

【讨论】：

谢谢，我会调查的。
好吧，这和我想要的有点远。经过反复试验，我找到了自己的解决方案。 ty

【解决方案2】：

好的，我找到了解决方案。我需要将 costheta 用于左侧位置，将 sintheta 用于顶部位置，并将它们与宽度距离相乘。将其与高度和宽度相加，除以 2，得到正确的值。

that.css({
  left: (cos * dis / 2) - (parseInt(that.width()) / 2),
  top: (sin * dis / 2) - (parseInt(that.height()) / 2)
});

您可以在这里找到工作代码 http://jsbin.com/adiwa3/53 和一个工作示例在这里 http://jeroenvanwarmerdam.nl/contact.aspx

【讨论】：

【解决方案3】：

我遇到了同样的问题，但无法在 IE 上运行 Javascript。 Here is我找到的解决方案。

【讨论】：