<div class="center">
  <div></div>
</div>

body {
  background: dodgerblue;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 50px;
}

.center:before,
.center:after,
.center div {
  background: #fff;
  content: "";
  display: block;
  height: 6px;
  border-radius: 3px;
  margin: 7px 0;
  transition: 0.5s;
}
.center:hover:before {
  transform: translateY(12px) rotate(135deg);
}
.center:hover:after {
  transform: translateY(-12px) rotate(-135deg);
}
.center:hover div {
  transform: scale(0);
}