[SOLUCIONADO] rotar solo un elemeto entre varios

[andrinson]

perdon que borrara el codigo es que ya lo solucione

no se como explicarlo pero prueben el codigo y entendera cual es mi problema
codigo html:

Código HTML:

<section class="categorias">
<h3 class="titulo-categoria" id="titulo_categoria">Categorias</h3>
<hr size="0.5em" color="black">
<ul>
<a href="" ><li class="li"><h3><img src="" class="logo-categorias"><div class="centro">Accion </div> </h3></li></a>
<a href=""><li class="li"><h3><img src="" class="logo-categorias"><div class="centro">Aventura</div></h3></li></a>
<a href=""><li class="li"><h3><img src="" class="logo-categorias"><div class="centro">Arcade</div></h3></li></a>
<a href=""><li class="li"><h3><img src="" class="logo-categorias"><div class="centro">Carreras</div></h3></li></a>
<a href=""><li class="li"><h3><img src="" class="logo-categorias"><div class="centro">Deportes</div></h3></li></a>
<a href=""><li class="li"><h3><img src="" class="logo-categorias"><div class="centro">Estrategia</div></h3></li></a>
<a href=""><li class="li"><h3><img src="" class="logo-categorias"><div class="centro">Logica</div></h3></li></a>
<a href=""><li class="li"><h3><img src="" class="logo-categorias"><div class="centro">Online</div></h3></li></a>
<a href=""><li class="li"><h3><img src="" class="logo-categorias"><div class="centro">2 Jugadores</div></h3></li></a>
</ul>
</section>
 

codigo css:

Código CSS:

.logo-categorias{
width:2.5em;
height:2.5em;
border-radius:50%;
-webkit-transition:all 0.5s ease-out;
}
 
.categorias:hover .logo-categorias{
-webkit-transform:rotate(360deg);
}
 
.categorias{
width:20%;
height:50em;
background-color:skyblue;
margin:5em 1em 0 0 ;
float:left;
border-radius:0 1em 1em 0;
}
 
ul .li{
background-color: red;
margin:0.3em 0 0 0;
height:3em;
border-radius:0 4em 4em 0;
width:100%;
box-shadow:-10px -10px 40px white inset;
}
 

espero que me entiendan , perdon por la poca informacion