在 jQuery 中旋转 Div 元素

这是一个简单的 jQuery 片段，用于旋转 jQuery 对象中的元素.可以开始和停止旋转:$(function() {var $elie = $(selectorForElementsToRotate);旋转(0)；函数旋转(度){//对于 webkit 浏览器:例如铬合金$elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});//对于 Mozilla 浏览器:例如火狐$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});//使用递归调用动画旋转setTimeout(function() {rotate(++degree); },5);}});jsFiddle 示例注意:取度数并增加它，将顺时针旋转图像.降低旋转度将旋转图像逆时针.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. 解决方案 To rotate a DIV Make use of WebkitTransform / -moz-transform: rotate(Xdeg). This will not work in IE. The Raphael library does work with IE and it does rotation. I believe it uses canvasesIf you want to animate the rotation, you can use a recursive setTimeout()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.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 exampleNote:Taking the degree and increasing it, will rotate the image clockwise. Decreasing the degree of rotation will rotate the image counter clockwise. 这篇关于在 jQuery 中旋转 Div 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！