移动端页面顶部菜单图标（3条横线）点击旋转

HTML中：

<button class="nav-mobile-button">
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
</button>

CSS中：

.nav-mobile-button{
	float: right; 
	padding: 9px 10px; 
	margin-top: 8px; 
	margin-right: 15px; 
	background-color: transparent; 
	border: 1px solid transparent; 
	outline: none;
}
.nav-mobile-button .icon-bar{
	display: block; 
	margin-top: 4px; 
	width: 22px; 
	height: 3px; 
	background: #f65d3f; 
	border-radius: 1px;
}
.rotate{
	transform-origin:center center; /*旋转中心要是正中间才行*/
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transition: transform 0.2s; 	/*过度时间 可调*/
	-webkit-transition: -webkit-transform 0.2s; 
	-moz-transition: -moz-transform 0.2s; 
	-ms-transition: -ms-transform 0.2s;
	-o-transition: -o-transform 0.2s; 
}
.rotate1{
	transform-origin:center center;
	transform: rotate(0deg);		/*返回原点*/
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transition: transform 0.2s; 
	-webkit-transition: -webkit-transform 0.2s; 
	-moz-transition: -moz-transform 0.2s; 
	-ms-transition: -ms-transform 0.2s; 
	-o-transition: -o-transform 0.2s; 
}

jQuery中：

<script>
    $(function(){
        //点击顶部菜单图标旋转90°效果
        $('.nav-mobile-button').click(function(){
            if($('#left').is(':visible')){                  //若左侧菜单栏可见，则
                $(this).removeClass('rotate');
                $(this).addClass('rotate1');
                $('#left').css("display", "none");
            }else{
                $(this).removeClass('rotate1');
                $(this).addClass('rotate');
                $('#left').css("display", "block");
            }
        });
    });
</script>