Problema compatibilidad css3

[Jesucks]

Buenas.

Estoy teniendo problemas de compatibilidad con css3. Supuestamente para hacer compatibilidad con chrome tengo que usar -webkit- . Este es el código y en mozilla funciona perfectamente pero en chrome no funciona.


#entrada li{
transition-duration:2s;
-moz-transition-duration:2s;
-webkit-transition-duration:2s;
-o-transition-duration:2s;
}

#entrada li:hover{
transform:translate(0px,-50px);
-moz-transform:translate(0px,-50px);
-webkit-transform:translate(0px,-50px);
-o-transform:translate(0px,-50px);
}



Sabéis como lo puedo solucionar?



Estoy viendo páginas web con efectos similares a lo que quiero en chrome y lo veo perfectamente.

por ejemplo esta
http://www.csslab.cl/ejemplos/css3-avanzado/ejemplo1.html

que tiene el código basicamente igual

[joseoliveras]

A mi en principio me funciona, revisa que tienes la ultima versión de Chrome.
Para crear código CSS3 yo empleo http://css3generator.com/

[Jesucks]

Tengo la version 17 de chrome que es la última!!

No se por qué no me funciona, en mozilla funciona perfectamente

[Jesucks]

Sigo sin encontrar el problema Nadie me sabe decir que puede ser?

PD: He probado con prefix-free y tampoco va... ni en IE ni en Chrome, solo va en mozilla

[joseoliveras]

A dia de hoy creo que IE no lo soporta
Prueba si te funciona en Safari, si te funciona en safari debería funcionarte en Chrome

[Jesucks]

Safari tampoco hace nada. Sólo lo hacen bien Opera y Mozilla. IE lo hace pero de golpe, sin tener en cuenta la duracion del efecto.

[emprear]

si me limito a tu css, SI, funciona.
Habría que ver todo el contexto en el que lo ubicás. Pasá una url o código competo

SAludos

[Jesucks]

Antes que nada Muchisimas gracias a todos por ayudar.

http://www.proyeaudio.com/

Esta es la web. He probado dejando solo esa parte de código css y tampoco va. Puede ser problema del código html? Está puesto así

<div id="principal">


<section id="entrada">
<ul>
<li><a href=""><img src="img/FotosBotonesE.jpg" width="250" height="400" alt="Empresa"></a></li>
<li><a href=""><img src="img/FotosBotonesI.jpg" width="250" height="400" alt="ImagenySonido"></a></li>
<li><a href=""><img src="img/FotosBotonesG.jpg" width="250" height="400" alt="Galeria"></a></li>
<li><a href=""><img src="img/FotosBotonesC.jpg" width="250" height="400" alt="Contacto"></a></li>
</ul>

</section>

[emprear]

Al parecer la propiedad inline de los li es lo que te anula el efecto en Chrome, substituilo por inline-block, las imágenes seguirán alineadas horizontalmente pero como bloques. Probado y funcionando en
Chrome, FF 10, Safari5(win), Opera 11
No se observan cambios en el diseño.

Saludos

[alivan]

Un detalle por no hacer doble post en cristalab. El código css se ve así:

Código CSS:

#entrada li:hover {
    -moz-transform: translate(0px,-30px);
    -moz-transform: translate(0px,-50px);
    -webkit-transform: translate(px, -50px);
    -o-transform: translate(0px,-50px);
}
 

Revísalo ;) Si usas prefixfree no pongas las propiedades de nuevo.

[Jesucks]

Perfecto!

Muchisimas gracias a todos. Ha funcionado lo de el inline-block !

Aunque cuando entro en la web de forma local no funciona el efecto al subirlo sí que se ve bien .

Para que en IE no haga el translate de golpe sino que respete los 2s no hay ninguna forma, verdad?


Muchisimas gracias de nuevo!