Question

我想要围绕特定点旋转div。我一直在尝试使用jQuery中的animate()方法来实现这一点。

我尝试使用{rotate: "+=9deg"}制作动画，但它不起作用。也尝试使用MozTransform...，但它不起作用。

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

对于更简单，更直观的方式，我有什么问题吗？或者它是jquery中的错误？或者这是一种荒谬的方式，我应该做“硬道”？

Answer 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特定的部分）包含在自己的样式表中。

Answer 2

找到一个完全符合这个要求的插件：

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

它允许您使用标准的animate（）函数为变换设置动画！

Answer 3

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

{
    transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -webkit-transform-origin':'0% 100%;
    -o-transform-origin:0% 100%;
    -ms-transform-origin': 0% 100%
}

Answer 4

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

围绕一个点旋转div

4 个答案: