在 jQuery 中旋转 Div 元素 [英] Rotating a Div Element in jQuery
问题描述
试图旋转一个 div 元素...这可能是对 DOM 的亵渎,它可以与 canvas 元素一起工作吗?我不确定 - 如果有人对这如何工作或为什么不工作有任何想法,我很想知道.谢谢.
旋转 DIV 使用 WebkitTransform/-moz-transform:rotate(Xdeg)
.
这在 IE 中不起作用.Raphael 库确实适用于 IE,并且它可以旋转强>.我相信它使用 canvas
es
如果要为旋转设置动画,可以使用递归setTimeout()
您甚至可以使用 jQuery 的 .animate()
确保考虑元素的宽度.如果旋转宽度大于其可见内容的宽度,您将获得有趣的结果强>.但是,您可以缩小元素的宽度,然后然后旋转它们.> 这是一个简单的 jQuery 片段,用于旋转 jQuery 对象中的元素.可以开始和停止旋转: 注意: 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 This will not work in IE. The Raphael library does work with IE and it does rotation. I believe it uses If you want to animate the rotation, you can use a recursive You could probably even do part of a spin with jQuery's 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:
Note: 这篇关于在 jQuery 中旋转 Div 元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!$(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 示例
取度数并增加它,将顺时针旋转图像.降低旋转度将旋转图像逆时针.WebkitTransform / -moz-transform: rotate(Xdeg)
. canvas
essetTimeout()
.animate()
$(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 example
Taking the degree and increasing it, will rotate the image clockwise. Decreasing the degree of rotation will rotate the image counter clockwise.