任何人都可以帮我制作一个从 = 到 x 的菜单吗？我是 CSS 新手

Question

我是网络开发新手，我正在经历一个figma设计，我需要制作一个像这样的菜单=菜单图像（第一张图片，下面）到x交叉菜单图像（第二张图片，下面）：

下面是我拥有的代码。 根据这个CSS代码，我可以将其转换为交叉，但它没有正确对齐。
这是我的十字和等菜单的图像等菜单图像＆十字菜单图像
请帮帮我。

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

您可以指定旋转原点，使旋转基于

X

的枢轴：

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

请注意，

9px

是它们之间间隙的一半

14px / 2

加上它们的高度

4px / 2

的一半的总和。

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

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

然后只做旋转而不平移应该对齐：

（出于演示目的，我将你的 ReactJS 代码更改为原生 HTML 代码）

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