change span lines into X html, css, javaskript
<p>Click on the Menu Icon to transform it to "X":</p>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="invis"></div>
<div class="bar3"></div>
</div>
---------------------------------------------------
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar3 {
width: 35px;
height: 2px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.invis {
width: 35px;
height: 2px;
margin: 6px 0;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-5px, 6px);
transform: rotate(-45deg) translate(-5px, 6px);
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-5px, -6px);
transform: rotate(45deg) translate(-5px, -6px);
}
--------------------------------------------------
function myFunction(x) {
x.classList.toggle("change");
}