Transition-Origin WAS NOT

So was trying to make a cross for my menu but it doesn’t seem to be working. Here is the code and i am also using js to rotate it by 45 deg: Thank You in advance!! even after changing the origin it is not working and refuses to make a perfect cross

JS:

document.addEventListener('DOMContentLoaded', function(){
                let nav = document.getElementById('nav-toogle')
                let bars = document.querySelectorAll(".open")
                let active = false;
                document.querySelector('#nav_menu').addEventListener('click', function(){
                    if(!active){
                        bars[0].style.transform = "rotate(45deg)"
                        bars[1].style.opacity = "0"
                        bars[2].style.transform = "rotate(-45deg)"
                        nav.style.maxHeight = "0vh";
                        nav.style.minHeight = "100vh";
                        active = true;
                    }
                    else{
                        bars[0].style.transform = "rotate(0deg)"
                        bars[1].style.opacity = "1"
                        bars[2].style.transform = "rotate(0deg)"
                        nav.style.minHeight = "0vh";
                        nav.style.maxHeight = "0vh";
                        active = false; 

HTML

<div class="menu" id="nav_menu">
       <span class="open"></span>
       <span class="open"></span>
       <span class="open"></span>
</div>

CSS

.open{
   width: 30px;
   height: 1px;
   background-color: var(--secondary);
   margin-bottom: 5px;
   transform-origin: left;
   }

.menu{
   position: fixed;
   top: 3.5em;
   right: 3.5em;
   width: 30px;
   height: 30px;
   display:none;
   cursor: pointer;
   justify-content: center;
   align-items: center;
}