@import url('openpage.css');

.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
}

ul {
  height: 50px;
  width: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}
ul p {
  width: 100%;
  height: 1px;
  background: white;
  -webkit-transition: all 250ms ease-out;
  transition: all 250ms ease-out;
}
ul:hover {
  height: 100px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -ms-flex-line-pack: justify;
      align-content: space-between;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 10px;
}
ul:hover p {
  -webkit-transform-origin: left;
          transform-origin: left;
}
ul:hover p:nth-child(1) {
  -webkit-transform: rotate(180deg) translateX(0px);
          transform: rotate(180deg) translateX(0px);
}
ul:hover p:nth-child(2) {
  opacity: 0;
}
ul:hover p:nth-child(3) {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}