Вращение элемента с помощью jQuery ⇐ Jquery

[Anonymous]

Я создаю базовый макет, чтобы проверить свои знания. Я создавал меню и решил его настроить. Я хочу поворачивать на 90 градусов значок, состоящий из 3 вертикальных линий, каждый раз, когда пользователи нажимают на него (этот значок виден только тогда, когда страница отображается на смартфонах - @media(max-size: 968px). Этот значок показывает меню при нажатии. Я тоже читал, как это сделать, погуглив, но пока не нашел ответа. Нужно ли мне использовать CSS или анимацию? Могу ли я достичь цели с помощью метода поворота? Можете ли вы показать мне правильный кстати? Я не понимаю, как их использовать для поворота значка.

Код: Выделить всё

$(function(){
var degree = 45;
var $buttonNav = $('.header__icon-bar');
$buttonNav.on('click', function(e){
e.preventDefault();
$('.header__nav').toggleClass('is-open');
});//end of $buttonNav
});//end of the start

Код: Выделить всё

/*----------
GENERAL
-----------*/
html,body { height: 100%; width: 100%;margin: 0; padding: 0;}

body{  background: #eee; }

/*----------
HEADER
-----------*/
.header__nav{  display: block; float: right; margin: 0; padding: 20px; background: #333; margin-top: 50px;}
.header__nav__item{ display: inline-block; margin: 0; }
.header__nav__item a {padding: 30px; padding: 20px; margin: 0; color: white; text-decoration: none;}
.header__nav__item a:hover { background: #ff3333; }

/*----------
icon-bar
-----------*/
.header__icon-bar{ margin: 0; padding: 10px; background-color: #333; float: left; display: none;}
.header__icon-bar span { padding: 3px 1px; margin: 3px ; background-color: white;}
.header__background{display: none; height: 0px; background-color: #333; margin: 0;}

@media(max-width: 960px) {
/*header-Menu*/
.header{ width: 100%; padding: 0; margin: 0;}
.header__nav{ width: 100%; overflow: hidden; height: 0px; margin: 0; padding: 0;  mar}
.header__nav__item { display: block; padding: 20px; margin: 0;}
.header__nav__item a{ width: 100%;padding-right: 100%;}

.is-open{ display: block; height: 255px; background: #333; display: block; margin: 0;}

/*button of spaun menu(nav)*/
.header__icon-bar{ display: block;margin-top: 10px; margin-left: 10px; float: left;}
.header__background{display: block; background-color:#333; height: 60px; width: 100%}

}

*/
/*----------
CLEARFIX
-----------*/
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Код: Выделить всё

[url=#] Home    [/url]
[*]  [url=#] Contact [/url]
[*]  [url=#] Apply   [/url]
[*]  [url=#] About   [/url]
[/list]

Подробнее здесь: https://stackoverflow.com/questions/433 ... ith-jquery