操作复选框以在未选中时让 CSS 旋转

Question

我制作了一个checkbox带有下拉菜单的移动导航。checkbox当选中（导航为“打开”）时，它会旋转 180 度，因此箭头朝上。我希望当我点击它时能有同样的效果。问题是我不知道如何达到这样的状态checkbox:unchecked （这没有意义，因为默认情况下复选框未选中，否则您不会在 html 中定义选中）或者我应该使用类似的东西吗:after？

我尝试了类似的方法，但没有成功（我想我没有使用正确的语法）

     #menu-toggle:checked~label i  {    /*Rotates when checked*/
     
         transform: rotate(180deg);
         transition: all ease-in-out .3s
      }

     #menu-toggle:checked:after~label i  {  /*My trial to reach the same reverse rotation when unchecked*/
         transform: rotate(-180deg);
         transition: all ease-in-out .3s
      }

1.默认状态下的箭头：

2. 选中时箭头朝上：

现在只有 CSS，没有 JS 或 jQuery。谢谢你！

Answer 1

它实际上非常简单，默认情况下，transition元素上的 a 确保任何类型的更改都能顺利进行，从初始到所需再到向后。您只需要rotate在以下情况下这样做checked：

#menu-toggle ~ label i {
  transition: all ease-in-out .3s;
}

#menu-toggle:checked ~ label i {
  transform: rotate(-180deg);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<input type="checkbox" id="menu-toggle">
<label>
  <i class="fa fa-angle-down" aria-hidden="true"></i>
</label>