围绕一个点旋转div

时间:2010-12-16 17:20:50

标签: jquery css3 jquery-animate

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

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

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

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

4 个答案:

答案 0 :(得分:3)

以下是使所有当前浏览器旋转元素所需的完整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特定的部分)包含在自己的样式表中。

答案 1 :(得分:2)

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

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

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

答案 2 :(得分:2)

要围绕某个点旋转,请使用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%
}

答案 3 :(得分:1)

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