如何在父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>