Преобразование иконки гамбургера не удается

Question

по какой-то причине я не могу заставить свою иконку гамбургера работать так, как ожидалось. Я видел много способов сделать это, но я не могу понять, что не так с моим. вот результат, который я получаю:

Я ожидаю получить «Х», конечно.

.hamb span {
  background-color: black;
  width: 50px;
  height: 5px;
  display: block;
  margin-bottom: 10px;
  transition: 0.5s;
}

.hamb:hover span:nth-child(1) {
  transform: rotate(45deg);
}

.hamb:hover span:nth-child(3) {
  transform: rotate(-45deg);
}

.hamb:hover span:nth-child(2) {
  transform: translateX(30px);
  opacity: 0;
}

.hamb:hover {
  cursor: pointer;
}

<div class="nav-item icon">
  <div class="hamb"><span></span> <span></span> <span></span></div>
</div>

Answer 1

Опираясь на хороший ответ @ TermaniAfif, я нахожу хорошим, если средняя линия остается на месте, а X выровнена по центру:

.hamb span {
  background-color: black;
  width: 50px;
  height: 5px;
  display: block;
  margin-bottom: 10px;
  transition: 0.5s;
}

.hamb:hover span:nth-child(1) {
  transform: rotate(45deg) translateY(10px) translateX(11px);
}
.hamb:hover span:nth-child(3) {
  transform: rotate(-45deg) translateY(-10px) translateX(11px);
}
.hamb:hover span:nth-child(2) {
  opacity: 0;
}

.hamb:hover {
  cursor: pointer;
}

<div class="hamb">
 <span></span>
 <span></span>
 <span></span>
</div>

Answer 2

Вы должны добавить перевод к первому и последнему промежутку:

.hamb {
 margin:10px;
}

.hamb span {
  background-color: black;
  width: 50px;
  height: 5px;
  display: block;
  margin-bottom: 10px;
  transition: 0.5s;
}

.hamb:hover span:nth-child(1) {
  transform: rotate(45deg) translateY(21px);
}
.hamb:hover span:nth-child(3) {
  transform: rotate(-45deg) translateY(-21px);
}
.hamb:hover span:nth-child(2) {
  transform: translateX(30px) ;
  opacity: 0;
}

.hamb:hover {
  cursor: pointer;
}

<div class="hamb">
 <span></span>
 <span></span>
 <span></span>
</div>