<h1> Hover me !</h1>
<div class='menu'>
  <div class='button main'>
    <div class='line' id='l1'></div>
    <div class='line' id='l2'></div>
    <div class='line' id='l3'></div>
    <div class='line'id='l4'></div>
  </div>
  <div class='sqContainer'>  
    <div class='sq' id='sq1'>HOME</div>
    <div class='sq' id='sq2'>PROJECT</div>
    <div class='sq' id='sq3'>GALLERY</div>
    <div class='sq' id='sq4'>ABOUT</div>
    <div class='button'></div>
   </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Pacifico);
html, body
{
  padding:0;margin:0;
  text-align:center;
}
h1
{
  font-family: 'Pacifico', cursive;
}
.menu
{
  position:fixed;
  top:50vh;
  margin-top:-200px;
  left:50vw;
  margin-left:-200px;
  width:400px;
  height:400px;
  border-radius:200px;
}
.sq
{
  position:absolute;
  z-index:1;
  width:200px;
  height:200px;
  background-color:#424242;
  
  text-align:center;
  line-height:200px;
  color:white;
  font-family: 'Oswald', sans-serif;
  
  
  cursor:pointer;
  transition:all 0.25s;
  -webkit-transition:all 0.25s;

}

.sqContainer
{
  transform-origin:200px 200px;
  transform:scale(0);
  -webkit-transform:scale(0);
 
  transition:all 0.25s;
  -webkit-transition:all 0.25s;
}

#sq1
{
  top:0;
  left:0;
  border-radius:200px 0 0 0;
}

#sq2
{
  top:0px;
  left:200px;
  border-radius:0 200px 0 0;
}
#sq3
{
  top:200px;
  left:200px;
  border-radius:0 0 200px 0;
}

#sq4
{
  top:200px;
  left:0px;
  border-radius:0 0 0 200px;
}
.main
{
  position:absolute;
  top:100px;
  left:100px;
  z-index:3;
  
  background-color:#151515;
  color:white;
  text-align:center;
  width:200px;
  height:200px;
  box-shadow:0px 0px 12px black;
  border-radius:100px;
  transition:all 0.5s;
  -webkit-transition:all 0.5s; 
}
.main .line
{
  position:absolute;
  background-color:white;
  width:100px;
  height:10px;
  left:50px;
  
  border-radius:50px;
  
   transition:all 0.5s;
  -webkit-transition:all 0.5s;
}

#l1{top:50px;}
#l2{top:80px;}
#l3{top:110px;}
#l4{top:140px;}

/* Animation*/
.main:hover, .menu:hover .main
{
  transform:rotate3D(0,0,1,90deg);
  -webkit-transform:rotate3D(0,0,1,90deg);
  box-shadow:none;
}

.main:hover #l2, .menu:hover #l2
{
  top:47px;
  width:10px;
  height:100px;
}

.main:hover #l3,.menu:hover #l3
{
  top:47px;
  left:150px;
  width:10px;
  height:100px;
}

.main:hover~ .sqContainer,.sqContainer:hover
{
  transform:scale(1);
  -webkit-transform:scale(1);
}
.sq:hover{z-index:2;box-shadow:1px 1px 6px black;color:black;}

/* I am working on */