旋转一个div元素在jQuery中 [英] Rotating a Div Element in jQuery

问题描述

试图旋转div元素......这可能是DOM亵渎，难道可能带有canvas元素的工作？我不知道 - 如果任何人有多么这可能是工作或者为什么不是这样，我很想知道任何想法。谢谢你。

Trying to rotate a div element...This might be DOM blasphemy, could it work possibly with a canvas element? I'm not sure - if anybody has any ideas of how this could work or why it doesn't, I'd love to know. Thanks.

推荐答案

要旋转DIV。利用 WebkitTransform /的-moz-变换：旋转（Xdeg）。

To rotate a DIV Make use of WebkitTransform / -moz-transform: rotate(Xdeg).

这将无法在IE浏览器。拉斐尔库并与IE浏览器和 它旋转 。我相信，它使用画布 ES

This will not work in IE. The Raphael library does work with IE and it does rotation. I believe it uses canvases

如果您要进行动画旋转，你可以使用递归的 的setTimeout（）

If you want to animate the rotation, you can use a recursive setTimeout()

您也许可以连做与jQuery的 .animate（）

You could probably even do part of a spin with jQuery's .animate()

请确保你认为你的元素的宽度。如果转动的具有宽度大于它的可见的内容，你会得到的 有趣的结果 。然而，你可以缩小元素的宽度，和 然后转动他们

Make sure that you consider the width of your element. If rotate an that has a larger width than its visible content, you'll get funny results. However you can narrow the widths of elements, and then rotate them.

下面是一个简单的jQuery的片段，旋转一个jQuery对象中的元素。 Rotatation可以启​​动和停止：

Here is a simply jQuery snippet that rotates the elements in a jQuery object. Rotatation can be started and stopped:

$(function() {
    var $elie = $(selectorForElementsToRotate);
    rotate(0);
    function rotate(degree) {

          // For webkit browsers: e.g. Chrome
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
          // For Mozilla browser: e.g. Firefox
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});

          // Animate rotation with a recursive call
        setTimeout(function() { rotate(++degree); },5);
    }
});

的jsfiddle例如

注意：的
以度和增加的话，会旋转图像顺时针。降低旋转度将图像旋转逆时针。

jsFiddle example

Note:
Taking the degree and increasing it, will rotate the image clockwise. Decreasing the degree of rotation will rotate the image counter clockwise.

这篇关于旋转一个div元素在jQuery中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！