How can I overlap two flexbox children with position relative in the middle of parent div?

Question

I'm trying to make an animated hamburger menu icon (three lines and a X when clicked). But I'm stuck trying to align the first horizontal line and the third one into an X shape.

How can I make two flexbox children overlap each other in the center of the parent div?

Here's what I've done:

 [].forEach.call(document.querySelectorAll('#hSandwich'), function(el) { el.addEventListener('click', function() { var ct = document.querySelector('#hSandwich'); var l1 = document.querySelector('.hSandwich-01'); var l2 = document.querySelector('.hSandwich-02'); var l3 = document.querySelector('.hSandwich-03'); l1.classList.toggle('hSandwich-01-x'); l2.classList.toggle('hSandwich-02-x'); l3.classList.toggle('hSandwich-03-x'); ct.classList.toggle('hSandwich-x'); }) }) 

 #hSandwich { width:40px; height:40px; border:1px solid black; display:flex; align-items:center; justify-content:center; flex-direction:column; } .hSandwichItem { width:60%; height:10%; border-radius:10px; background:grey; margin:2px 0 2px 0; transition: all 0.2s ease-out; } .hSandwich-01-x { position:relative; margin-top:-50%; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .hSandwich-02-x { opacity:0; } .hSandwich-03-x { position:relative; margin-top:-50%; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } 

 <div id="hSandwich"> <div class="hSandwich-01 hSandwichItem"></div> <div class="hSandwich-02 hSandwichItem"></div> <div class="hSandwich-03 hSandwichItem"></div> </div> 

Thanks a lot.

Answer 1

Are u expecting like this:

rotate(45deg) will rotate the first div towards upward direction and rotate(-45deg) will rotate the third div in the downward direction so menu icon will look like this: > .Then just add margin-top to third div to get X shape

 [].forEach.call(document.querySelectorAll('#hSandwich'), function(el) { el.addEventListener('click', function() { var ct = document.querySelector('#hSandwich'); var l1 = document.querySelector('.hSandwich-01'); var l2 = document.querySelector('.hSandwich-02'); var l3 = document.querySelector('.hSandwich-03'); l1.classList.toggle('hSandwich-01-x'); l2.classList.toggle('hSandwich-02-x'); l3.classList.toggle('hSandwich-03-x'); ct.classList.toggle('hSandwich-x'); }) }) 

 #hSandwich { width:40px; height:40px; border:1px solid black; display:flex; align-items:center; justify-content:center; flex-direction:column; } .hSandwichItem { width:60%; height:10%; border-radius:10px; background:grey; margin:2px 0 2px 0; transition: all 0.2s ease-out; } .hSandwich-01-x { position: relative; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .hSandwich-02-x { opacity:0; } .hSandwich-03-x { position: relative; margin-top: -34%; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } 

 <div id="hSandwich"> <div class="hSandwich-01 hSandwichItem"></div> <div class="hSandwich-02 hSandwichItem"></div> <div class="hSandwich-03 hSandwichItem"></div> </div>