Con HTML5 y CSS3 podemos utilizar la propiedad 'transform' para modificar características de un <div> como la posición (position), la rotación (rotation), la escala (scale) o el -menos utilizado- el sesgo (skew).
Este cambio de posición, tamaño o rotación se produce al instante (no hay animación en este cambio, para ello habría que utilizar 'transition' o 'animation').
Para poder comprobar estas propiedades vamos a utilizar un DIV que contiene el dibujo sencillo de un martillo (creado con SVG).
A este <div> le vamos a aplicar todas las transformaciones de posición, rotación, escala y sesgo, partiendo de esta posición, tamaño, escala y apariencia original.
Es muy importante tener en cuenta que para que 'transform' funcione en todos los navegadores deberemos repetir las propiedades anteponiendo los prefijos de cada uno de los navegadores:
-webkit- (para Chrome y Safari) -moz- (para Firefox). -o- (para Opera) -ms- (para versiones modernas de Internet Explorer).
Desplazamiento (translate)
El movimiento se basa en la suma o resta de píxeles en su posición horizontal y vertical respecto a la posición en la que se encuentra el objeto en este momento.
Con números positivos se desplaza el objeto hacia la derecha y hacia abajo y con números negativos se desplaza hacia arriba y hacia la izquierda.
Así, en este ejemplo, el <div> del martillo se desplaza 200 píxeles hacia la derecha y 5 píxeles hacia abajo respecto a su posición original.
#martillo{
transform:translate(200px,5px);
}
También es posible utilizar porcentajes, si queremos colocar este martillo en la mitad horizontal de la pantalla (osea 'centrar el martillo horizontalmente') podemos indicar un porcentaje (50%), en vez de utilizar píxeles.
#martillo{
transform:translate(50%,0px);
}
Rotación (rotate)
La rotación se basa en los grados de rotación (de 0º a 360º). El eje de rotación siempre está situado en el centro del <div> y los grados se especifican añadiendo 'deg' después del valor (por ejemplo: 90deg).
Si se indican valores positivos en los grados de rotación, el objeto rota hacia la derecha. Con los grados especificados en números negativos, el objeto rota hacia la izquierda. (Así, teniendo en cuenta que una vuelta entera equivale a 360º, se aprecia el mismo resultado con 350deg, que con -10deg).
#martillo{
transform:rotate(90deg);
}
En este caso, el <div> del martillo rota 90 grados hacia la derecha tomando como eje de rotación el centro del <div> donde se encuentra el martillo (que no siempre coincide con el contenido de dicho <div>).
Escala (scale)
La escala de un objeto se basa en una escala horizontal, seguida de la vertical, siendo 1 la escala original (correspondiente al tamaño original). Para obtener un porcentaje se puede multiplicar el valor indicado por 100, así un valor de '2' (2x100=200) representaría un 200%, osea el doble de tamaño.
Aumenta o disminuye de tamaño tomando como eje el centro del <div>.
#martillo{
transform:scale(2,1.75);
}
En este caso, el <div> del martillo aumenta de tamaño no proporcionalmente. Aumenta el doble de anchura (2x100= 200%) y tan solo un 175% de altura (1.75x100= 175%).
Sesgo (skew)
Para definir el sesgo se indica primero el sesgo horizontal y posteriormente el vertical.
Se pueden utilizar valores o positivos según se requiera para la deformación.
#martillo{
transform:skew(10,25);
}
Múltiples transformaciones simultáneas
Se pueden indican tantas transformaciones como se deseen de manera simultáneamente separando cada una de ellas por un espacio.
En este ejemplo, al <div> del martillo se le aplica un desplazamiento hacia la derecha de 200 píxeles, al mismo tiempo una rotación hacia la derecha de 33 grados y finalmente una redución de tamaño proporcional del 50%.
Compatibilidad con todos los navegadores
Para que estas transformaciones funcionen en todos los navegadores tenemos que repetir el código, anteponiendo los prefijos correspondientes a cada uno de los navegadores (-webkit-, -moz-, -ms- y -o-).
