[SOLUCIONADO] CSS3 propiedad transform

[artforhum]

hola,

tengo una nav con una imagen con cada li. Tengo una imagen y abajo de esta el texto del nav, por ejemplo proyecto, y arriba de este un circulo con un icono para proyecto, que sirve de link.
Esta imagen la puse en background del li, ya que en el hover la cambio por otra imagen (si la ponia con html (img src) no podia cambiarla en el hover, ya que el hover me aparecia abajo de la imagen).

El problema viene cuando yo quiero agregar la propiedad transform o cualquier otra para que sea un poco mas dinámico, por ejemplo, que esta imagen rota al darle hover. El problema que rota la imagen y tambien el texto del link, por ejemplo "proyecto", que está en el "a".
He probado varias cosas, y sobretodo la propiedad transform:none (-webkit-transfrom:none" .. y ni resultado)

Alguna idea?

gracias!!

[pzin]

Es mejor que pongas código a que lo narres cual novela.

[artforhum]

pzin tienes toda la razón! jeje, aquí va el código:

HTML:

Código HTML:

<nav>
            <ul>
                <li id="proyecto"> 
                    <a id="proyecto-a" href="#"> Proyecto </a>                  
                </li>
            </ul>
        </nav>
 

(solo pongo un enlace para no alargar)

CSS:

Código CSS:

nav li#proyecto{
        background:url('img/main-proyecto.png') no-repeat;
        }
nav li#proyecto:hover{
        background:url('img/hover-proyecto.png') no-repeat;
        -webkit-transform:rotate(25deg);
        -moz-transform:rotate(25deg);
        }
nav li a:hover{
        -webkit-transform:none;
        -moz-transform:none;
        }
 

[pzin]

Pues si quieres seguir manteniendo la misma estructura, lo ideal sería añadir un pseudo-elemento, poner ahí la imagen y rotarlo. Algo así:

Código CSS:

li#proyecto:after {
  display: block;
  height: 100px;
  width: 100px;
  content: '';
  background-image: url();
  transition: all .4s ease-out;
}
 
li:hover:after {
  transform: rotate(25deg);
}
 

[artforhum]

hola!
problema resuelto, tal como me dices pzin, aunque en vez de usar el pseudo-elemento after, usé el before. Con after me quedaba después del nombre del enlace, y poniendo before en el elemento "a", me quedó perfecto!

muchas gracias, no había usado nunca estos pseudo-elementos y fue un descubrimiento para mi, gracias!