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