CSS实现鼠标悬停时图标旋转

效果图：

示例代码： 

<div class="test">其他 <span class="icon">^</span></div>

    .test {
        padding: 3px;
        background-color: #243656;
        color: white;
        display: inline-block;
        &:hover {
            cursor: pointer;

            .icon {
                transform: rotate(180deg);
            }
        }
        .icon {
            display: inline-block;

            transition: all 0.15s ease-in-out;
        }
    }

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