jQuery-添加CSS OnClick仅在首单击时工作

Question

有两个标签，我希望它们在单击时旋转。我用jQuery对此进行了操作，但仅在第一次点击中起作用！我该如何在每次点击上工作？

$(document).ready(function() {
  $(document).on("click", "#male", function() {
    $('#male i').css({
      'transform': 'rotate(360deg)'
    })
  })
});

#male i,
#female i {
  transition: 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<label id="male" class="pull-left text-center col-md-5 btn btn-default" style="height: 36px;">
  <i class="fa fa-2x fa-male text-center" style="color: tomato">
  <input type="radio" name="gender" value="male" checked>
  </i>
</label>
<label id="female" class="pull-right text-center col-md-5 btn btn-default" style="height: 36px;">
  <i class="fa fa-2x fa-female text-center" style="color: purple">
  <input type="radio" name="gender" value="female">
  </i>
 </label>

Answer 1

maleRotation = 0;
$(document).on("click", "#male", function () {
        maleRotation+= 360;
        $('#male i').css({
            'transform': 'rotate('+maleRotation+'deg)'
        })
    })