JQuery-顺时针和逆时针旋转一个div答案

【问题标题】：JQuery- Rotating a div clockwise and anticlockwiseJQuery-顺时针和逆时针旋转一个div
【发布时间】：2013-05-09 14:43:46
【问题描述】：

我找到了这个关于如何使用 JQuery 旋转 div 的链接。

Rotating a Div Element in jQuery 以及更多文章。

代码如下

    $(function() {
            var $elie = $("#wheel");
            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)'
                });
                $elie.css({
                    '-ms-transform' : 'rotate(' + degree + 'deg)'
                });

                // Animate rotation with a recursive call
                setTimeout(function() {
                    rotate(++degree);
                }, 5);
            }

        });

有人可以帮我将此代码扩展为像方向盘一样顺时针和逆时针随机旋转元素

【问题讨论】：

你需要在 degree 上使用 math.random 以便它可以选择负数或正数。

标签： jquery css rotation transform

【解决方案1】：

你可以扩展 jQuery.animate() 来创建类似jsfiddle的东西

$.fx.step['degree']=function(fx){
if(! fx.deg){
    fx.deg=0;
    if($(fx.elem).data("degree")){
        fx.deg=$(fx.elem).data("degree")
    }   
}
$(fx.elem).css({"WebkitTransform":"rotate("+Math.floor(fx.deg+(fx.end*fx.pos))+"deg)","-moz-transform":"rotate("+Math.floor(fx.deg+(fx.end*fx.pos))+"deg)","-ms-transform":"rotate("+Math.floor(fx.deg+(fx.end*fx.pos))+"deg)"});
$(fx.elem).data("degree",Math.floor(fx.deg+(fx.end*fx.pos)));    }

【讨论】：

不客气，您可以在没有 .data() 的情况下将其更改为工作，但 css 转换看起来像 transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)

【解决方案2】：

您只需要更改 setTimeout 内的代码以使递增/递减随机

 // Animate rotation with a recursive call
                setTimeout(function() {
                    increment= Math.random() < 0.5 ? -1 : 1;
                    degree+=increment;
                    rotate(degree);
                }, 5);

或

increment = Math.floor(Math.random()*3)-1;

用于 -1,0,1 运动

【讨论】：

谢谢你的回答:)