围绕一个点旋转 div

Question

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

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

但是，这样的方法确实有效： {'-moz-transform': 'rotate('+ Degrees+'deg)'}

我用更简单、更直观的方法做错了什么吗？还是jquery的一个bug？或者这是一种荒谬的方式，我应该采取“硬方法”？

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 属性从一个值更改为另一个值。）