How to rotate elements either forward or back from current state

Question

Say I have three elements. When user clicks on any of the elements, that element needs to rotate either +120 degrees or -120 degrees every time it's clicked (direction selected randomly with no particular order). So if it's current rotation is at 120, when it's click again, it rotates another 120 degrees. I need it to alternate between plus or minus rotation at random. So it can either rotate forward or back...

Here is the code I currently have:

``````var aElement = \$(".element").each(function(){});

aElement.on('click', function() {

\$(this).css("transform", "rotate(120deg");

})
``````

Any help is greatly appreciated.

Show source

Answers to How to rotate elements either forward or back from current state ( 3 )

1. ``````var aElement = \$(".element").each(function(){});

aElement.on('click', function() {

if (\$(this).css("transform") == "rotate(120deg)") {
\$(this).css("transform", "rotate(-120deg");
} else {
\$(this).css("transform", "rotate(120deg");
}
})
``````
2. I stand corrected. \$(this).css('transform') doesn't give us the numeric angle. Instead it gives us something like this `matrix(-0.5, 0.866025, -0.866025, -0.5, 0, 0)`. Remember you need to do this for the rest of the browser prefixes.

``````\$('.element').click(function(elm){
var tr = \$(this).css("transform");

var values = tr.split('(')[1];
values = values.split(')')[0];
values = values.split(',');
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];

var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
angle = angle * - 1;
console.log(angle);
\$(this).css({ transform: 'rotate(' + angle + 'deg)'});

});``````
``````li{
width: 50px;
height: 50px;
background: tomato;
margin-bottom: 10px;
transform: rotate(120deg);
}``````
``````<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="element"></li>
<li class="element"></li>
<li class="element"></li>
<li class="element"></li>
<li class="element"></li>
<li class="element"></li>
<li class="element"></li>
</ul>``````

3. I suggest to use `data-*` attributes to check if the clicked element is rotated of not using (1 and 0) then do the inversion, check the example below.

Hope this helps.

``````\$('body').on('click', '.element', function() {
if ( \$(this).data("rotated")==='1' ) {
\$(this).css("transform", "rotate(0deg").data("rotated","0");
} else {
\$(this).css("transform", "rotate(120deg").data("rotated","1");
}
})``````
``````.element{
width: 100px;
height: 100px;
}``````
``````<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img  data-rotated='0' class="element" src='http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png' />
<img  data-rotated='0' class="element" src='http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png' />
<img  data-rotated='0' class="element" src='http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png' />``````

Update

For random rotation you could generate a random boolean and make a condition on it, check the example below.

``````\$('body').on('click', '.element', function() {
var random_rotation_state = Math.random() >= 0.5;
var rotation = parseInt(\$(this).data('rotation'));

if ( random_rotation_state )
rotation+= 120;
else
rotation-= 120;

\$(this).css("transform", "rotate("+rotation+"deg").data("rotation", rotation);
console.log(rotation);
})``````
``````.element{
width: 100px;
height: 100px;
}``````
``````<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>