在jQuery中旋转Div元素

Question

在jQuery中旋转Div元素试图旋转div元素......这可能是DOM亵渎，它可能与canvas元素一起工作吗？我不确定 - 如果有人对这如何起作用或为什么不起作用有任何想法，我很想知道。谢谢。

Answer 1

旋转DIV使用WebkitTransform / -moz-transform: rotate(Xdeg)。

这在IE中不起作用。Raphael库可以与IE一起使用，它可以旋转。我相信它使用canvases

如果要为旋转设置动画，可以使用递归 setTimeout()

你甚至可以用jQuery做一些旋转 .animate()

确保考虑元素的宽度。如果旋转宽度大于可见内容的宽度，则会得到有趣的结果。但是，您可以缩小元素的宽度，然后旋转它们。

这是一个简单的jQuery片段，用于旋转jQuery对象中的元素。旋转可以开始和停止：

$(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例子

注意：
获取度数并增加它，将顺时针旋转图像。降低旋转度将图像旋转该逆时针。

Answer 2

是的，我想你不会有太多运气。通常在主要浏览器使用的3种绘图方法（Canvas，SVG，VML）中，文本支持很差，我相信。如果你想旋转图像，那么一切都很好，但如果你有格式和样式的混合内容，可能不是。

查看RaphaelJS获取跨浏览器绘图API。