Css实现点击图片旋转动画

效果图

  <div class="switch">
      <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190919162145-%E5%8F%8C%E4%B8%8A%E7%AE%AD%E5%A4%B4-01.png"
               alt="">
  div>

  .switch {
        width: 32px;
        height: 33px;
        border-radius: 4px;
        background: #EEEEEE;
        border: 1px solid #B7B7B7;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .switch img {
        width: 15px;
        transition: transform .5s;
    }

    .animation {
        transform: rotate(-180deg);
    }

   $('.switch').click(function () {
        if ($(this).children('img').hasClass('animation')) {
             $(this).children('img').removeClass('animation')
         } else {
             $(this).children('img').addClass('animation');
         }
    })