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:
Ver originalli#proyecto:after {
display: block;
height: 100px;
width: 100px;
content: '';
background-image: url();
transition: all .4s ease-out;
}
li:hover:after {
transform: rotate(25deg);
}