Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: desastro en 30 Agosto 2011, 10:01 am



Título: CSS3 2D Transforms no me funciona
Publicado por: desastro en 30 Agosto 2011, 10:01 am

Hola a todos, estoy probando transforms en CSS3 para escalar un div pero no me funciona.
 
Código:
div {
 transform: scale(.5, .5);
 }

¿Supuestamente debería de ir, no? Yo creo que el código está bien.


Título: Re: CSS3 2D Transforms no me funciona
Publicado por: EFEX en 30 Agosto 2011, 20:25 pm
CSS3 2D Transforms
http://www.w3schools.com/css3/css3_2dtransforms.asp (http://www.w3schools.com/css3/css3_2dtransforms.asp)

Como lo explica tenes que usar diferentes prefijos como, -moz-, -ms-, -webkit- u -o-, en cada caso de diferente browser.

Código
  1. div
  2. {
  3. transform: scale(0.5,0.5);
  4. -ms-transform: scale(0.5,0.5); /* IE 9 */
  5. -webkit-transform: scale(0.5,0.5); /* Safari and Chrome */
  6. -o-transform: scale(0.5,0.5); /* Opera */
  7. -moz-transform: scale(0.5,0.5); /* Firefox */
  8. }
  9.  

Actualiza tu browser hasta la ultima version.


Título: Re: CSS3 2D Transforms no me funciona
Publicado por: inlain en 31 Agosto 2011, 11:05 am
las 2D Transforms todavía se están especificando, por ello cada navegador tiene una forma distinta de interpretarlo y tienes que utilizar un prefijo para indicar en qué navegador lo estás aplicando como te ha puesto EFEX.

En caso de IE9 tendrías que poner:
Código:
div {
    -ms-transform: scale(.5, .5);
}

Lo mismo pasa con transform-origin, tienes que poner –ms-trasnform-origin
Puedes mirar más información sobre cómo implementar las novedades de HTML5 con IE9 en la guía del desarrollador   (http://msdn.microsoft.com/es-es/ie/ff468705)

También puedes empezar a probar HTML5 en IE10 (http://ie.microsoft.com/testdrive/Info/Downloads/Default.html)