【笔记】css实现鼠标移入，菜单图标变叉叉

实现效果：
原：

移入：

-----------------代码如下-----------------
html部分：

<div class="rotateChange">
    <div></div>
    <div></div>
    <div></div>
</div>

css部分：

        .rotateChange{
            border: 1px solid #42b983;
            width: 50px;
            height: 50px;
            padding: 10px;
            position: relative;
        }
        .rotateChange>div{
            width: 50px;
            height: 5px;
            background-color: #42b983;
            position: absolute;
            transition: all .2s linear;
        }
        .rotateChange>div:nth-of-type(1){
            top:17px
        }
        .rotateChange>div:nth-of-type(2){
            top:33px
        }
        .rotateChange>div:nth-of-type(3){
            top:50px
        }
        .rotateChange:hover{
            border: 1px solid #eb596c;
        }
        .rotateChange:hover div:nth-of-type(1){
            top:33px;
            background-color: #eb596c;
            transform: rotate(45deg);
        }
        .rotateChange:hover div:nth-of-type(2){
            background-color: #eb596c;
            transform: scaleX(0);
        }
        .rotateChange:hover div:nth-of-type(3){
            top:33px;
            background-color: #eb596c;
            transform: rotate(-45deg);
        }