<div>
  <input type="checkbox" id="chk" class="menu">
  <span class="option option1"><a href=""><i class="fa fa-adjust"></a></i></span>
  <span class="option option2"><a href=""><i class="fa fa-crop"></a></i></span>
  <span class="option option3"><a href=""><i class="fa fa-eyedropper"></i></a></span>
  </input>
  <label class="menuIcon" for="chk"><span class="glyphicon glyphicon-plus"></span></label>
</div>

@import "compass/css3";

body{
  background-color: #FFF0AA;
}

.menuIcon{
  position: absolute;
  top: 23px;
  left: 27px;
  z-index: 1000;
  transition: all .4s ease;
  .glyphicon-plus{
    font-size: 50px;
  }
}

.hide{
  display:none;
}

.menu{
  display: none;
  &:after{
    content:'';
    background-color: #E29000;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
    z-index: 1000;
    border-radius: 0 0 50% 0;
    box-shadow: 1px 1px 15px;
    cursor:pointer;
  }
}

.menu:checked ~ {
  .option1{
    transform: translateY(115px) translateX(10px);
  }
  .option2{
    transform: translateY(95px) translateX(85px);
  }
  .option3{
    transform: translateY(25px) translateX(105px);
  }
  .menuIcon{
   transform: rotate(45deg);
   transform-origin: 50% 50%;
   color: #B27100;
  }
  
}

.option{
  background-color: #E29000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  text-align: center;
  box-shadow: 0px 0px 15px;
  transform: translateY(25px) translateX(20px) scaleY(0.1) scaleX(0.1);
  transition: all .4s cubic-bezier(0,0.52,0.3,1.5);
  &:hover{
    i{
      margin-top: 15px;
      font-size: 22px;
    }
  }
  a{
    color: #000;
  }
  i{
    margin-top: 18px;
    transition: all .2s cubic-bezier(0,0.52,0.3,1.5);
  }
}