[英]Javascript rotate - how to rotate counterclockwise?
I have two shapes that I made to rotate on scroll. 我有两种形状可以滚动滚动。 I was able to rotate them clockwise, however I would like the second shape to rotate counterclockwise.
我能够顺时针旋转它们,但是我希望第二个形状逆时针旋转。
JSFiddle: https://jsfiddle.net/7tLv05on/ JSFiddle: https ://jsfiddle.net/7tLv05on/
Here is the following code I used to achieve that: 这是我用来实现该目标的以下代码:
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});
});
Thank you I really appreciate the help! 谢谢,我非常感谢您的帮助!
Just do it like this: 像这样做:
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});
});
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});
});
Just multiply value by -1 and that's it: 只需将值乘以-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/ https://jsfiddle.net/7tLv05on/5/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.