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:
Ver original<h3 class="titulo-categoria" id="titulo_categoria">Categorias
</h3> <hr size="0.5em" color="black"> <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>
codigo css:
Código CSS:
Ver original.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