JMiur [E]

Cuando utilizamos las propiedades de transformación, estas se ejecutan tomado como punto de origen el centro el objeto. Esto es así en todos los navegadores que las soportan, incluyendo Internet Explorer 9. En el resto, solemos emplear filtros pero estos funcionan de manera completamente distinta así que por un rato nos ovidamos de ellos.

Si bien todos los navegadores modernos aceptan la propiedad, por ahora, cada uno de ellos utiliza prefijos propios:
-moz-transform para Firefox
-webkit-transform para Chrome y Safari
-o-transform para Opera
-ms-transform para Internet Explorer 9


Si bien ese punto de origen es el que esta definido por defecto, también hay una propiedad que permite cambiarlo llamada transform-origin que también tiene sus prefijos:
-moz-transform-origin
-webkit-transform-origin
-o-transform-origin
-ms-transform-origin
En todos los navegadores, el valor inicial es 50% 50% y para definirlo pueden usarse porcentajes, pixeles o palabras como center, left, right, top o bottom.

El orden es el mismo que en todas las otras propiedades, el primero indica la coordenada horizontal y el segundo la vertical. Así que si pusieramos 0 0 o left top, cambiaríamos el punto de origen al ángulo superior izquierdo (que es como funcionan los filtros de IE):


De este modo:

transform-origin: center center o transform-origin: 50% 50% es el centro y el valor por defecto
transform-origin: left top o transform-origin: 0% 0% es el ángulo superior izquierdo
transform-origin: right top o transform-origin: 100% 0 es el ángulo superior derecho
transform-origin: left bottom o transform-origin: 0% 100% es el ángulo inferior izquierdo
transform-origin: right bottom o transform-origin: 100% 100% es el ángulo inferior derecho

center topcenter bottomleft centerright center

4 comentarios:

Beben Koben  

hmmm...ie now support transforms attribute...nice nice ;)

Responder
Splisiv  

Hola, Puedo aser una Pregunta?
Como puedo poner un Slider como este:
http://btemplates.com/2010/blogger-template-sinem/demo/

en mi pagina?¿

Responder
JMiur  

Beben Koben:
I'm an old XP user so I can't test it :D

Splisiv:
Es un script para la librería MooTools. Conviene que descargues la plantilla y mires la forma en que se usa.

Responder
Señor González Admin  

Excelente página, me ha servido mucho para construir mi blog...! muchísimas gracias.... :)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR