I'm making a button with an animation: the typical hamburger button that changes to an X. The problem is that I can't make the X centered after the animation.
Here I leave the code:
let toggle = document.getElementById("container-boton")
toggle.addEventListener("click", cositas)
function cositas(){
if(toggle.classList.contains("active")){
toggle.classList.remove("active")
}else{
toggle.classList.add("active")
}
}
*{
padding: 0;
margin: 0;
}
body{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
}
.container-boton{
display: flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
border: 3px solid #000;
}
.container-boton .boton{
background-color: black;
width: 50px;
height: 5px;
border-radius: 50cm;
}
.container-boton .boton::before,
.container-boton .boton::after{
content: '';
position: absolute;
background-color: black;
width: 50px;
height: 5px;
border-radius: 50cm;
transition: 300ms;
}
.container-boton .boton::before{
transform: translateY(16px);
}
.container-boton .boton::after{
transform: translateY(-16px);
}
.container-boton.active .boton{
transform: translateX(62px);
background:transparent;
}
.container-boton.active .boton::before{
transform: rotate(45deg)translate(43.4px, -43.4px);
}
.container-boton.active .boton::after{
transform: rotate(-45deg)translate(43.4px, 43.4px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container-boton" class="container-boton">
<div class="boton"></div>
</div>
<script src="main.js"></script>
</body>
</html>
I would like it to be centered.
The only thing I did was remove the translations, maybe you put one for some reason then you didn't need it but it stayed there, then you tried to compensate it with another translation.
I have removed both...
The problem is in one of your CSS rules , which is shifting the icon 62px to the right, causing it to go out of its frame.
As to transform the 3 lines into an X you are already having to move it to the right, what interests you is to move it to the left so that the icon does not come out. It would be changing the 62px to -62px, which I think is what was intended.