使用CSS实现鼠标悬停时图标旋转效果

效果图

代码

<span class="other">其他<i class="el-icon-arrow-down el-icon--right icon-arrow"/></span>

  .icon-arrow{
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
  }
  .other:hover .icon-arrow{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
  }

其中180deg为相对于初始样式旋转的角度