<section>
<div class="hamburger"></div>
</section>

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bar-height: 20px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

body {background: #333;}

.hamburger {
  width: 100px;
  height: 100px;
  position: relative;
  transition: transform .5s;
}

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

.hamburger::before,
.hamburger::after {
content: "";
display: block;
width: 100%;
height: var(--bar-height);
border-radius: 5px;
background: #eee;
position: absolute;
transition: .5s .25s;
}

.hamburger::before {top: calc(50% - var(--bar-height) * 1.5);}

.hamburger::after  {top: calc(50% + var(--bar-height) / 2);}

.hamburger:hover::before,
.hamburger:hover::after {top: calc(50% - var(--bar-height) / 2);}

.hamburger:hover::before {transform: rotate(-135deg);}

.hamburger:hover::after  {transform: rotate( 135deg);}