如何在父div的中间重叠两个具有相对位置的flexbox子代？

Question

我正在尝试制作一个动画汉堡菜单图标（单击时三行和X）。 但是我一直试图将第一条水平线和第三条水平线对齐为X形。

如何使两个flexbox子级在父div的中心彼此重叠？

这是我所做的：

 [].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> 

非常感谢。

Answer 1

您是否期望这样：

rotate(45deg)将使第一个div向上rotate(-45deg) ， rotate(-45deg)将使第三个div向下旋转，因此菜单图标如下所示： >然后将margin-top添加到第三个div以得到X形状

 [].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>