Necesito animar botones en CSS 3 en el estado de Hover

[franfrionina]

Hola tengo un Menú creado en HTML5 en el Header de mi html y quiero que se anime cuando paso el Mouse encima (Hover). En el estilo coloque la propiedad para que se anime pero no me funciona. Agradeceria alguien me ayude para saber que esta sucediendo.

Los botones estan dentro de un div llamado menu dentro del header de la página. Y en el estilo coloque el código así.

#header#menu:hover
{
cursor: pointer;

transform: scale(1.2) rotate(365deg);
-webkit-transform: scale(1.2) rotate(365deg);

transition: transform 1s linear;
-webkit-transition: -webkit-transform 1s linear;
}

Gracias, espero ayuda.

[Carlangueitor]

En que navegador y versión lo estás viendo?

Esto no es HTML5 es CSS3, espera a que un moderador lo mueva.

Saludos

[franfrionina]

Hola, te comento. En ningun explorador puedo ver el efecto de animación. Se supone que si es CSS3 la acción esta puesta en el estilo. De hecho se supone le puse el código para que se pueda ver bien en los diferentes exploradores

#header#menu:hover
{
cursor: pointer;

transform: scale(1.2) rotate(365deg);
-webkit-transform: scale(1.2) rotate(365deg);
-moz-border-transform: scale(1.2) rotate(365deg);
-o-border-transform: scale(1.2) rotate(365deg);
-ms-border-transform: scale(1.2) rotate(365deg);

transition: transform 1s linear;
-webkit-transition: -webkit-transform 1s linear;
-moz-border-transition: -webkit-transform 1s linear;
-o-border-transition: -webkit-transform 1s linear;
-ms-border-transition: -webkit-transform 1s linear;
}

Envio tambien como esta el código en el html en la parte del header.

<header>
<div class="menu"><a href="quienessomos.html"><img src="g/quienesosmosbot.png" width="136" height="31" border="0"></a><a href="cursos.html"><img src="g/cursosbot.png" width="77" height="31" border="0"></a><a href="instalaciones.html"><img src="g/instalacionesbot.png" width="135" height="31" border="0"></a><a href="docentes.html"><img src="g/docentes.png" width="102" height="31" border="0"></a><a href="galeria.html"><img src="g/galeria.png" width="81" height="31" border="0"></a><a href="descargas.html"><img src="g/descargas.png" width="105" height="31" border="0"></a><a href="videos.html"><img src="g/videos.png" width="78" height="31" border="0"></a><a href="productos.html"><img src="g/productos.png" width="104" height="31" border="0"></a><a href="links.html"><img src="g/links.png" width="64" height="27" border="0"></a></div>
</header>


Si alguien sabe que esta puesto mal lo agradeceria mucho.

Gracias

[Carlangueitor]

El problema parece ser que estás usando mal los selectores, #header se refiere a un elemento cualquiera con id igual a "header", y según tu código tiene que ser header a secas.

Ahora, si estás usando HTML5 usa semántica, los menús se pueden hacer con la etiqueta nav y en cada enlace no pongas imágenes, usa una imagen de fondo y si es necesario oculta el texto.

Ten en cuenta que con ese código le estás aplicando el efecto a todo el menú no a los enlaces.

Saludos

[franfrionina]

Hola muchas gracias, me sirvio lo que me comentaste ya me funciono. :)