在jQuery中旋转Div元素 [英] 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-transform：rotate（Xdeg ）。

这在IE中不起作用。 Raphael图书馆可以使用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对象中的元素。可以启动和停止旋转：

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示例

注意：

取得学位并增加它，将顺时针旋转图像。降低旋转度会使图像旋转逆时针。

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