在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。