围绕一个点旋转div

问题描述：

我想动画旋转关于某个点的div。我一直在尝试使用jQuery中的animate()方法来实现这个功能。围绕一个点旋转div

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

然而，像这样做的工作：{'-moz-transform': 'rotate('+degrees+'deg)'}

有什么我做错了用更简单，更直观的方式？或者它是一个jQuery中的错误？或者这是荒谬的方式，我应该做到“硬道路”？

[旋转jQuery的div元素（http://stackoverflow.com/questions/382591/rotating-a-div-element-in-jquery） – 2010-12-16 17:25:23

答

发现一个插件，正是这一点：

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

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

答

rotate不是CSS属性，所以.animate()将无法使用它。（.animate()只是逐渐变化从一个值到另一个指定的CSS属性。）

答

下面是完整的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的信息。 – 2010-12-17 14:10:10

答

要绕一个点旋转，请使用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% 
}

围绕一个点旋转div

相关推荐