Mi problema es que que, en el código que mostraré a continuación, el transform:translate funciona de distintas formas según el navegador:
En Chrome: No se ve la transición (sí, si se ponen los valores del transalte en pixeles)
En Firefox: Se ve perfectamente la transición.
En Opera: Se ve la transición sólo de ida, no de vuelta.
En IE 11: Se ve perfectamente la transición.
Código CSS:
Ver original
html, body {width:100%; height:100%;} #content { position:relative; top:10%; left:0; width:50%; height:70%; margin:0 auto 0 auto; z-index:1001; border:1px solid yellow; } #cuadroNegro { position:absolute; top:35%; left:37%; width:25%; height:35%; background-color:black; z-index:1000; } #circulo_1 { position:absolute; top:52%; left:49%; width:5px; height:5px; opacity:1; z-index:1001; background-color:#F00; -webkit-transition:all ease 1s; -moz-transition:all ease 1s; -ms-transition:all ease 1s; -o-transition:all ease 1s; transition:all ease 1s; } #content:hover #circulo_1 { width:20%; height:25%; opacity:1; -webkit-transform:translate(-100%,-100%); -moz-transform:translate(-100%,-100%); -ms-transform:translate(-100%,-100%); -o-transform:translate(-100%,-100%); transform:translate(-100%,-100%); }
Código HTML:
Ver original
Las preguntas sería: ¿Qué cambios tendría que hacer para que en Chrome se vea la transición utilizando porcentajes? y ¿cómo hacer para que Opera muestre la transición "de vuelta"?
Saludos cordiales.
![Golpeado](http://static.forosdelweb.com/fdwtheme/images/smilies/pelea.png)
![Golpeado](http://static.forosdelweb.com/fdwtheme/images/smilies/pelea.png)
![Golpeado](http://static.forosdelweb.com/fdwtheme/images/smilies/pelea.png)