汉堡按钮的制作以及其中的问题

第一种自己写的，下面的第二种是网上的用一个span使用做出来的

HTML

            
            
            
        

CSS

*{
    margin: 0px;
    padding: 0px;
}
.box{
    width: 50px;
    height: 50px;
    margin: 100px auto 0px;
    border: 1px solid saddlebrown;
    background-color: rgba(0,0,0,.8);
    position: relative;
    
    
}

.box span{
    position: absolute;
    display:block;
    width: 50px; height: 1px;
    border: 1px solid #FFFFFF;
    background-color: #FFFFFF;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;/*用来达到水平垂直，居中*/
    transition: transform .3s ease;
    
}

/*这里有个问题就是在格式高宽同时设置了margin：auto时候top等属性的移动的时候是2被的数值*/
.box .s1{
    top:-47px;/*（重要）这里为什么是-50px，而不是-25px，因为设置了margin：auto，解析每当我的top上升了2px，也就是说下面多了2px，因为margin的存在就会分1px去上面所以感觉就是向上移了1px*/
}
.box .s2{
    

}
.box .s3{
     top:47px;
}
.box .s1rotate{
    -moz-transform-origin: 30 0; /*以中兴为旋转点，这里可以不用写英文默认就是以中心点旋转*/
    -webkit-transform-origin:30 0;
    -moz-transform-origin: 30 0;
    transform:rotate(45deg);
}
.box .s2translate{   /*下面2个展现方法一个是隐藏中的线 ，一个是位移出去的*/
    /*transform: scale(0); *//*这个是隐藏*/
    transform: translateX(-55px) ;/*这个是位移*/
}
.box .s3rotate{
    
    -moz-transform-origin: 30 0;
    -webkit-transform-origin:30 0;
    -moz-transform-origin: 30 0;
    transform:rotate(-45deg);
}

js

var box =  document.querySelector(".box");
        var s1 = document.querySelector(".s1");
        var s2 = document.querySelector(".s2");
        var s3 = document.querySelector(".s3");//在这里必须放在全局为由去除.S1一但去除那么这里的代码就没有用了
        box.onclick = function(){
            //用与判断不同是否已经变化的情况    
            if(this.className.indexOf("chang") > -1){ //判段当该改变了,执行true
                s1.classList.add("s1");
                s3.classList.add("s3");
                s1.classList.remove("s1rotate");
                s2.classList.remove("s2translate");
                s3.classList.remove("s3rotate");
                this.classList.remove("chang");//去除
            }else{
                s1.classList.add("s1rotate");
                s2.classList.add("s2translate");
                s3.classList.add("s3rotate");
                s1.classList.remove("s1");
                s3.classList.remove("s3");
                this.classList.add("chang");//增加
            }
            
        }

/*第二种的使用*/