[英]jQuery on click css3 rotation
I need to get an image to rotate having its transform origin at 50% 50%. 我需要让图像旋转,其变换原点为50%50%。 is the following correct?
以下是正确的吗? It does not seem to work for me.
它似乎对我不起作用。
function slideUp_Menu(){
$('.main_nav').slideUp('slow', function(){
$("#arrow_up").css({ "-webkit-transform": "rotate(180deg)" });
$("#arrow_up").css( "-webkit-transform-origin", "50% 50%");
});// $('.tab_wrapper').animate({ marginTop: '193px' }, 500, 'linear');
}
I would add the transitions to your class in css eg: 我会在css中将过渡添加到您的类中,例如:
transition: transform 1s ease;
then create another class and in there set the transform eg: 然后创建另一个类,并在那里设置转换,例如:
transform: rotate(10deg);
Then I would use jquery to add/remove the class eg: 然后我会使用jquery来添加/删除类,例如:
$(document).on('click', 'selector', function() {
$(this).addClass('class with transform');
});
Remember to include all the browser prefixes in your css selectors. 请记住在css选择器中包含所有浏览器前缀。
Js fiddle: http://jsfiddle.net/FhXj6/ Js小提琴: http : //jsfiddle.net/FhXj6/
no man its not correct and its for webkit supporting browsers! 没有人不正确,它的webkit支持浏览器!
function slideUp_Menu(){
$('.main_nav').slideUp('slow', function(){
$("#arrow_up").css({ "-moz-transform": "rotate(180deg)" });
$("#arrow_up").css( "-moz-transform-origin", "50% 50%");
$("#arrow_up").css({ "-webkit-transform": "rotate(180deg)" });
$("#arrow_up").css( "-webkit-transform-origin", "50% 50%");
$("#arrow_up").css({ "transform": "rotate(180deg)" });
$("#arrow_up").css( "transform-origin", "50% 50%");
});// $('.tab_wrapper').animate({ marginTop: '193px' }, 500, 'linear');
}
You could probably do it with jQuery but I'd recommend using Greensock for animations: 你可以用jQuery做到这一点,但我建议使用Greensock进行动画制作:
https://www.greensock.com/gsap-js/
the performance is far better and stuff like rotating is a breeze. 性能要好得多,像旋转这样的东西是轻而易举的。 Use .get(0) at the end of your selector and jQuery is a fine partner :)
在选择器的末尾使用.get(0),jQuery是一个很好的合作伙伴:)
TweenMax.to($("#arrow_up").get(0), {css:{rotation:180}});
If you want transform origin look here: 如果你想变换原点看这里:
https://www.greensock.com/get-started-js/
"transformOrigin – Sets the origin around which all transforms occur. By default, it is in the center of the element ("50% 50%")."
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.