How to make a menu from = to x in CSS [duplicate]

Question

I'm new in web development and I was going through a Figma design where I need to make a menu like this = menu image (first image, below) to x cross menu image (second image, below):

Below is my code. According to this CSS code I am able to transform it to cross but it's not aligning properly. Here is the image of my cross and equal menu equal menu image & cross menu image.

header {
  background-color: #000000;
  width: auto;
  height: 114px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /* font-size: calc(10px + 2vmin); */
  padding: 0px 40px;
}

.logo {
  width: auto;
  height: auto;
}


/* .hamburger {
  width: auto;
}

.line {
  width: 44px;
  border: 2px solid #ffffff;
  border-radius: 10px;
} */

.hamburger {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* Adjust gap for better spacing */
  width: 44px;
  height: 44px;
  text-align: center;
}

.line {
  width: 100%;
  height: 4px;
  /* Thickness of the lines */
  text-align: center;
  background-color: #ffffff;
  /* Color of the lines */
  border-radius: 10px;
  transition: all 0.3s ease;
  /* Smooth transition */
  position: relative;
  /* Position relative for absolute positioning of lines */
}

.hamburger.active .line1 {
  transform: rotate(45deg) translate(5px, 5px);
  /* Rotate and move the first line */
}

.hamburger.active .line2 {
  transform: rotate(-45deg) translate(5px, -5px);
  /* Rotate and move the second line */
}

<header>
  <div className="logo">
    <img src={LogoSvg} alt="stan+vision logo" width={ "165px"} height={ "24px"} />
  </div>
  <div role="button" className={`hamburger ${isActive ? "active" : ""}`} onClick={toggleMenu}>
    <div className="line line1"></div>
    <div className="line line2"></div>
  </div>
  <div>
    <button>Theme</button>
  </div>
</header>

Answer 1

You can specify the origin of the rotation to make the rotate based on the pivot of the X:

.line {
  transform-origin: 9px center;
}

Note that 9px is the sum of half of the gap between them 14px / 2 plus half of their height 4px / 2.

Then only do a rotation without translate would be aligned:

.hamburger.active .line1 {
  transform: rotate(45deg);
}

.hamburger.active .line2 {
  transform: rotate(-45deg);
}

(I changed your ReactJS code into native HTML code for demonstration purpose)

.hamburger {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* Adjust gap for better spacing */
  width: 44px;
  height: 44px;
  text-align: center;
}

.line {
  width: 100%;
  height: 4px;
  /* Thickness of the lines */
  text-align: center;
  background-color: #000;
  /* Color of the lines */
  border-radius: 10px;
  transition: all 0.3s ease;
  /* Smooth transition */
  position: relative;
  /* Position relative for absolute positioning of lines */
  
  transform-origin: 9px center;
}

.hamburger:hover .line1 {
  transform: rotate(45deg);
}

.hamburger:hover .line2 {
  transform: rotate(-45deg);
}

<div role="button" class="hamburger">
  <div class="line line1"></div>
  <div class="line line2"></div>
</div>

Also, if you want to shift the whole X to the right a bit, you can add translateX before rotate:

.hamburger.active .line1 {
  transform: translateX(5px) rotate(45deg);
}

.hamburger.active .line2 {
  transform: translateX(5px) rotate(-45deg);
}