How to rotate your imagem with jQuery


#1

Hey guys. I am trying to program a program (that pleonasm) which lets you build your own triangles. (I'll never finish it btw, I'm just trying to find a way to practise). But I'm having trouble with the "transform" usage in jQuery.
With width, height, left and top, the += and the -= works fine.
But with transform, it doesn't.
Here's part of the code:

$(document).ready(function() {
	$(document).keydown(function(event) {
		if(event.which === 40) {
			$(".line").css("width","-=1px")
		};
		if(event.which === 38) {
			$(".line").css("width","+=1px")
		};
		if(event.which === 37) {
			$(".line").css("transform","rotate(-=10deg)");
		};
		if(event.which === 39) {
			$(".line").css("transform","rotate(+=10deg)");
		};
	});
	$(document).keydown(function(event) {
		if(event.which === 46) {
			$(".line").remove();
		};
	});
});

The $(".line").css("transform","rotate(+=10deg)"); is wrong. I don't know what to do and I can't find a simple explanation online. Can someone help me please? :relaxed:


#2

you can use any one of these :slight_smile:

1

$(elem).animate({
transform: 'translateX(40px)'
});

2

$(elem).animate({
transform: 'rotate(105deg)'
});

3

$(elem).animate({
transform: 'scale(2,.5)'
});

4

$(elem).animate({
transform: 'skewX(25deg) skewY(25deg)'
});

:slight_smile: