Probablemente la más
útil de las transformaciones, rotate hace exactamente lo que dice en la
lata: gira cualquier elemento. El navegador no debe asumir la unidad de
medida utilizada, por lo que debe incluirse para la rotación: radianes ( rad),
vueltas ( turn) o grados ( deg) para grados.
Hay cinco
características importantes a tener en cuenta con respecto a la rotación de CSS:
·
Rotar un elemento es muy parecido a usar el posicionamiento
relativo ; el espacio original para el elemento se
conserva y la transformación del elemento hace que quede "sobre" el
contenido normal. Esto también significa que partes del elemento pueden
rotar fuera de la página, dado un valor lo suficientemente grande.
·
Otro contenido permanece inconsciente de
las transformaciones: el texto que envuelve la imagen flotante de arriba no
cambia solo porque la imagen se gira, y contiene para envolver el espacio
rectangular original que ocupaba la imagen. Envolver texto alrededor de
formas irregulares requiere otras
técnicas .
·
box-shadowlos efectos se
aplican antes de la transformación. Esto significa que
una sombra puede terminar yendo en una dirección inesperada cuando se gira un
elemento. Por lo general, es más fácil aplicar la rotación y luego
experimentar con el mapeo de sombras apropiado en el elemento transformado.
·
La rotación se calcula desde el centro del
elemento por defecto. Esto se puede cambiar modificando el transform-originvalor
de la propiedad.
La rotación no se limita simplemente a las imágenes; Los efectos de
transformación se pueden aplicar a cualquier elemento, como se muestra en los
siguientes dos artículos.
DEMOSTRACIÓN
En Visual Studio vamos a dar click en menú File à New à Project
En la Ventana emergente le damos click a Web y espacio
Name colocamos el nombre del proyecto que para el Ejemplo es “Demo 12 20480” y
luego presionamos el botón OK
En el espacio de nombre del proyecto damos click derecho y seleccionamos
Add à New Items
En la siguiente ventana seleccionamos la Opción “Pagina HTML” y colocamos
como nombre del archivo “2DRotation.html”, para luego presionar el botón Add y
escribir el código HTML.
En el encabezado del documento empezamos escribiendo una etiqueta
<STYLE></STYLE> y dentro de ella los estilos con sus propiedades.
Como lo dijimos anteriormente la propiedad CSS transform te permite modificar el espacio de coordenadas del
modelo de formato visual CSS. Usándola, los elementos pueden ser trasladados,
rotados, escalados o sesgados de acuerdo a los valores establecidos.
Rotate() Define una operación de
rotación 2D de un elemento, especificando la cantidad de grados (deg) que este
rotará en sentido de las manecillas del reloj.
Con las innovaciones en HTML5 y CSS3 los navegadores
implementan, muchas veces, sus propios estándares basados en características no del todo
aprobadas por la W3C, por esto es necesario el uso de prefijos en algunas
propiedades.
-webkit- Para Chrome, Safari, Android, iOs
-moz- Para Firefox
-o- Para Opera
-ms- Para Microsoft Internet Explorer
Seguimos codificando dentro de nuestra etiqueta <STYLE></STYLE>
La Propiedad Translate(), se
utiliza como lo dijimos anteriormente para mover sus elementos en los ejes X y
Y.
La propiedad CSS transform-origin le
permite modificar el origen de las transformaciones de un elemento. Por
ejemplo, el transform-origin de la función rotate() es el centro de
rotación. (Esta propiedad es aplicada a la primera translación del elemento por
el valor negativo de la propiedad. A continuación, aplicar la transformación
del elemento y después trasladar el valor de la propiedad).
Comenzamos escribiendo en el cuerpo <BODY></BODY>:
Y procedemos a ver nuestra página web:
