Solution 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:

Problem :

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...

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:


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…

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


Comment posted by

See if this helps ๐Ÿ™‚

Comment posted by tooNoobToCode

I tried that, but unfortunately that isn’t working for me… the solution with rotateZ in your codepen doesn’t work right I think?

Comment posted by Imran Rafiq Rather

I was debugging that ! That’s not the original one… Try now ๐Ÿ™‚

Comment posted by tooNoobToCode

Ok thank you. Your solution in codepen is exactly what I want and it looks nice. However, in my code it doesn’t work…Do you have any idea why? Or is it maybe a browser problem, although I tested it in Chrome and Edge…?

Comment posted by Imran Rafiq Rather

.. Actually I also changed the CSS a bit…You need to update that also …