如何使用HTML和CSS旋转滑动导航面板的按钮元素？

Basically, I have an html page where I have set up a sliding panel when you click the square. How do I get the square to rotate 180 degrees when I click it? I can only manage to have the button trigger the div sliding or the the button spinning, but not both at the same time. I noticed it has something to do with how I'm placing the input tag. If it's inside the label, the button rotates but there is no effect on the panel. If it's outside of the label, pressing the square triggers the side panel. Been going at this all day but can't seem to figure it out. Ideally, I would have liked to get a arrow in place of the square but I wouldn't know where to start...Basically, I have an html page where I have set