CSS transform360 rotation outside rotate content does not rotate

Html:

<div class= "WRAP_" >
    <ul>
        <li class= "One_" ><a href= "" >360 rotate </a></li>
    </ul>
</div>

Css:

. Wrap_ ul li:hover{
border-style:dashed;
-webkit-animation:spinaround 9s linear infinite;
-moz-animation:spinaround 9s linear infinite;
Animation:spinaround 9s linear infinite;
}
. Wrap_ ul li:hover a{
-webkit-animation:spinaround1 9s linear infinite;
-moz-animation:spinaround1 9s linear infinite;
Animation:spinaround1 9s linear infinite;
}
@-webkit-keyframes Spinaround {
From {
-webkit-transform:rotate (0deg)
    }
To {
-webkit-transform:rotate (360deg);
    }
}
@-moz-keyframes Spinaround {
From {
-moz-transform:rotate (0deg)
    }
To {
-moz-transform:rotate (360deg);
    }
}
@keyframes Spinaround {
From {
transform:rotate (0deg)
    }
To {
transform:rotate (360deg);
    }
}

@-webkit-keyframes SpinAround1 {
From {
-webkit-transform:rotate (0deg)
    }
To {
-webkit-transform:rotate ( -360deg);
    }
}
@-moz-keyframes SpinAround1 {
From {
-moz-transform:rotate (0deg)
    }
To {
-moz-transform:rotate ( -360deg);
    }
}
@keyframes SpinAround1 {
From {
transform:rotate (0deg)
    }
To {
transform:rotate ( -360deg);
    }
}
Note: 1. The outer div is turning 360, the inner element is inverted-360, and the external story is cancelled, not rotating;
2.rotate rotation properties;
3. Compatibility;

CSS transform360 rotation outside rotate content does not rotate