Javascript 旋转 - 如何逆时针旋转？

Question

我有两个形状，我让它们在滚动时旋转。我成功地使它们顺时针旋转，但我希望第二个形状逆时针旋转。

JSFiddle: https://jsfiddle.net/7tLv05on/

以下是我用来实现这个目标的代码:

var sdegree = 0;

$(window).scroll(function() {

sdegree ++ ;
sdegree = sdegree + 2 ;

var srotate = "rotate(" + sdegree + "deg)";

$(".move1").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
$(".move2").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});

});

谢谢，我非常感激您的帮助！

- user3663071

---

看看我的答案 :) - Tom el Safadi

谢谢大家提供的各种回复！！ - user3663071

很高兴你已经解决了它 :) @user3663071 - Tom el Safadi

Answer 1

就像这样做：

  var sdegree = 0;
  var sdegree2 = 0;

  $(window).scroll(function() {

    sdegree ++ ;
    sdegree = sdegree + 2 ;

    sdegree2 -- ;
    sdegree2 = sdegree2 - 2 ;

    var srotate = "rotate(" + sdegree + "deg)";
    var srotate2 = "rotate(" + sdegree2 + "deg)";

    $(".move1").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
    $(".move2").css({"-moz-transform" : srotate2, "-webkit-transform" : srotate2});

  });

- Tom el Safadi

Answer 2

var sdegree = 0;

$(window).scroll(function() {

    sdegree ++ ;
    sdegree = sdegree + 2 ;

    var srotate = "rotate(" + sdegree + "deg)";

    $(".move1").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});

    //negative degree
    var sdegree2 = -sdegree;
    srotate = "rotate(" + sdegree2 + "deg)";
    $(".move2").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});

});

{{link1：fiddle}}

- user4035

Answer 3

只需将值乘以-1即可：

var sdegree = 0;

$(window).scroll(function() {

sdegree ++ ;
sdegree = sdegree + 2 ;

var cwRotate = "rotate(" + sdegree + "deg)",
    ccwRotate = "rotate(" + (-1 * sdegree) + "deg)";

$(".move1").css({"-moz-transform" : cwRotate, "-webkit-transform" : cwRotate});
$(".move2").css({"-moz-transform" : ccwRotate, "-webkit-transform" : ccwRotate});

});

https://jsfiddle.net/7tLv05on/5/

- jacqbus

---

我现在明白了，但我的代码稍微短一些，只使用了一个额外的变量。 - jacqbus