How to achieve a rotating effect on a cog icon similar to YouTube settings cog/ wheel

[Alejandro Nava-Gomez]

Hello, 

I am looking for examples of how to do rotate effect on a click event, on a font-awesome icon: <i class="fa fa-cog"></i>

I am starting to code using AngularJS framework, and my knowledge of JavaScript is still developing. Seeing examples of something already existing, helps me to understand with less frustration how things work.

The effect is seeing on YouTube's player, the little setting gear you click to turn annotations on/off, and auto-play. I think it rotates 45 deg clockwise, and then back to position 0 when clicked again.

This is not homework, nor work related. I am just curious to learn how this effect is done. 

I appreciate your help and advice. 

Best, 

Alejandro.

[Alejandro Nava-Gomez]

I found this demo but the problem is that even though the rotation occurs, it does not apply to the icon so the gears of it do not move really, just the entire div.

[o_O Bille]

Seems to work if you move the ng's to a new a-tag.? I havent tested it in all browsers and stuff.

<div ng-controller="Main">

    

    <div style="width:100px;margin:10%;border:1px solid #000;" ><a href="#" ng-animate="{enter: 'rotate', leave: 'rotateCounterwise'}" ng-class="{true: 'rotate', false: 'rotateCounterwise'}[isActive]" ng-click="rotate()"><i class="fa fa-cog"></a></i>

click to rotate</div>

</div>

Cheers
Bille
www.elitenet.dk

[Alejandro Nava-Gomez]

Awesome! Thank you very much for your help Bille.

[Alejandro Nava-Gomez]

I was able to make it look a bit better, using only one div: http://jsfiddle.net/itortu/35mu96ng/

Having the second div for the text, made it jump when the rotation completed. 

Thank you.