La transformación

Regresar al índice

1. La propiedad

Para aplicar una transformación tendremos que utilizar la propiedad transform. Esta propiedad utilizará a su vez diversas funciones dependiendo de la transformación en cuestión.

2. El punto de referencia

De manera predeterminada, todas las transformaciones tomarán como punto de referencia el centro del elemento. Ese punto de referencia sirve de valor inicial en los cálculos de las transformaciones.

Nosotros podemos cambiar ese punto de referencia con la propiedad transform-origin. El valor insertado indicará el nuevo punto de referencia.

Los valores posibles son: 

• porcentajes: por defecto, el valor es de 50% 50%, es decir, el centro del elemento. 
• palabras clave: left, center, right, top, center, bottom. 
• valores expresados en píxeles.

Este sería el resultado de una rotación con el punto de referencia predeterminado, es decir, en el centro del elemento:

Veamos un ejemplo de modificación del punto de origen a la esquina superior izquierda del elemento, seguido de una rotación:

.rotar {

-moz-transform-origin: left top;

-webkit-transform-origin: left top;

-o-transform-origin: left top;

transform-origin: left top;

-moz-transform: rotate(32deg);

-webkit-transform: rotate(32deg);

-o-transform: rotate(32deg);

transform: rotate(32deg);

}

Este sería el resultado obtenido al modificar del punto de referencia:

Espero haber ayudado en algo. Hasta la próxima oportunidad!

Regresar al índice

Twittear