如何在点击时旋转汉堡菜单图标

Question

I have a problem with my hamburger menu, especially with the icons. My HTML looks like this:

 <input type="checkbox" id="check"/>
 <header class="IndexHeader">
   <nav class="navigation">
       <label class="Hamburger" for="check">&#9776;</label>
       <label class="schliessen" for="check">&#9932;</label>
       <ul class="IndexNavliste">
           a list...
       </ul>  
    </nav>            
 </header>

I want my .schliessen label to rotate 180 degrees when I click on the .Hamburger label, so that it is like an animation effect. I tried it like this with jQuery:

$(".Hamburger").click(function(){
   $(".schliessen").css("transform","rotate(180deg)");
});

That didn't really work for me. Also, I think I need a transition in it so that I really can see it when I click the label. I also tried to do it in the CSS directly so when my checkbox is checked. That works but I couldn't see the animation and my hover effect didn't work anymore after that...

.Hamburger{
  display: block;
  transition: 500ms;
}
.schliessen{
  transition: 500ms;
}
.schliessen:hover{
  color: black;
}
#check:checked + .IndexHeader .navigation .Hamburger{
  display: none;
}
#check:checked + .IndexHeader .navigation .schliessen{
  display: block;
  transform: rotate(180deg);
}

Answer 1

The issue with transition and transform:rotate("180deg") is happening because transform never gets a new value from first click onwards on Hamburger. To overcome that I have added and removed classes on clicks.

Have also removed un-necessary CSS and added what is required for this problem:

Here is the working code:

codepen.io/emmeiWhite/pen/XWjBXRY?editors=1111