围绕一个点旋转 div答案

【问题标题】：Rotating a div about a point围绕一个点旋转 div
【发布时间】：2010-12-16 17:20:50
【问题描述】：

我想制作关于特定点旋转 div 的动画。我一直在尝试 jQuery 中的 animate() 方法来让它工作。

我尝试过使用{rotate: "+=9deg"} 制作动画，但它不起作用。还尝试使用MozTransform...，但没有成功。

但是，这样的事情确实有效：{'-moz-transform': 'rotate('+degrees+'deg)'}

我用更简单、更直观的方法做错了什么吗？或者它是jquery中的一个错误？或者这是一种荒谬的方式，我应该“硬着头皮”去做？

【问题讨论】：

Rotating a Div Element in jQuery 的可能重复项

标签： jquery css jquery-animate

【解决方案1】：

这是让所有当前浏览器旋转元素所需的完整 CSS 样式表。我已经用它们影响的相关浏览器评论了这些样式。

.myclass {
  -ms-transform: rotate(45deg);   /* IE9 ? */
  -moz-transform: rotate(45deg);  /* FF3.5+ */
  -o-transform: rotate(45deg);  /* Opera 10.5 */
  -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
  transform: rotate(45deg);  /* CSS3 (for when it gets supported) */
  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 */
}

此示例将元素旋转 45 度。 IE6/7/8 filter 和 -ms-filter 样式使用弧度而不是度数。

filter 样式与其他样式之间的另一个大区别是旋转的原点。如果我没记错的话，transform 样式围绕中心旋转，而 MS 样式围绕左上角旋转。我相信这可以调整，但我们只是通过使用仅 IE 的样式来解决这个问题，该样式改变了元素的绝对位置，因此它最终在同一个地方。显然，这对动画没有帮助。

最后要指出的是，IE6/7 filter 样式实际上是无效的 CSS（因为它包含冒号和其他保留字符）。 IE8 的-ms-filter 变体是可以的，因为它在引号中，但在 IE6/7 版本中是不允许的。这个问题实际上破坏了 Firefox（可能还有其他浏览器）中的 CSS 解析，以至于无法读取任何后续样式。出于这个原因，我建议您将它（或至少是特定于 IE 的部分）包含在它自己的样式表中。

【讨论】：

很好的解释！但我正在寻找有关通过围绕一个点旋转 div 来为 div 设置动画的信息。

【解决方案2】：

找到了一个可以做到这一点的插件：

https://github.com/heygrady/transform/wiki/

它允许您使用标准 animate() 函数为变换设置动画！

【讨论】：

【解决方案3】：

要围绕一个点旋转，请使用 transform-origin 属性。例如，以下将设置围绕左下角的旋转。

{ 变换原点：0% 100%； -moz 变换原点：0% 100%； -webkit-transform-origin':'0% 100%; -o-transform-origin:0% 100%; -ms-transform-origin'：0% 100% }

【讨论】：

【解决方案4】：

rotate 不是 CSS 属性，因此 .animate() 无法使用它。（.animate() 只是逐渐将指定的 CSS 属性从一个值更改为另一个值。）

【讨论】：