A fin de exponer elementos con una posición
diferente a la original, aplicaremos transformaciones CSS de tipo rotación,
según las reglas de este lenguaje de diseño. Existen diferentes páginas web con carencia de llamativos, debido a
la simplicidad con la cual muestran bloques de textos e imágenes. Por lo tanto,
identificaremos las propiedades y colores de CSS para especificar correctamente
transformaciones.
Las rotación de imágenes en el
lenguaje CSS cambia de ubicación la misma, sin afectar la original. En las rotaciones
especificamos como valor números positivos y la imagen va a rotar en sentido de
las agujas del reloj, y con negativos será todo lo contrario. Tal como se
muestra en la siguiente ilustración, tenemos la imagen original y mediante una
rotación aplicada, se muestra en una nueva posición.
061-01_0803_ilu01.
Representación de una rotación
Para crear una rotación es
necesario:
- Transform: es la propiedad de transformación del elemento.
- Rotate: es el valor para especificar la rotación del elemento.
- Ángulo:
está conformado por la cantidad de la rotación y el acrónimo de la palabra degrees, en español grados.
061-01_0803_ilu02.
Especificación de una rotación
La rotación funciona de siguiente
manera:
- Agregamos
al documento HTML una clase llamada Prueba,
con varios saltos de línea para simular la existencia de información.
- Delimitamos
en el documento CSS un ancho y alto con Width
y Height en 100 píxeles cada uno,
para observar mejor el cambio de la presentación.
- Especficamos
margin-left para definir un margen a
la derecha y así verla por completo.
- Agregamos background-color a fin de mostrar en
color la caja CSS formada por la etiqueta div.
- Definimos transform con valor de rotación en 45
grados.
Observemos cada paso el siguiente
código:
061-01_0803_ilu03.
Código con la especificación de una rotación
Para observar la diferencia entre
la especificación negativa y positiva de una imagen.
- Agregamos
una imagen de la clase prueba1 con
una rotación de 35 grados, por ende se visualiza en sentido de las agujas del
reloj.
- Agregamos
otra imagen de la clase prueba2 con
una rotación de -35 grados, por lo tanto es mostrada en contra de las agujas
del reloj.
En la siguiente imagen se muestran
las dos ilustraciones, sin embargo, con esta prueba también es posible utilizar
la rotación de elementos en bloques de textos.
061-01_0803_ilu04.
Especificación de rotación positiva y negativa
Keynotes
- Las rotación de imágenes en el lenguaje CSS
cambia de ubicación la misma sin afectar la original.
- En las rotaciones especificamos como valor
números positivos y la imagen va a rotar en sentido de las agujas del reloj, y
con negativos será todo lo contrario.
- Para crear una rotación es necesario: Transform: la propiedad de
transformación del elemento. Luego Rotate:
el valor para especificar la rotación del elemento. Y por último, e ángulo está
conformado por la cantidad de la rotación y un acrónimo de la palabra degrees, en español grados.
- Es
posible utilizar la rotación de elementos en bloques de textos.
Reto
Expón tres elementos con una posición diferente a
la original, mediante un documento CSS y sigue las reglas de este lenguaje.
¡Comparte el resultado final del reto en tu vPages y solicita a tus compañeros un
comentario de optimización a tu instrucción!
Tiempo disponible: entre 15 y 30
minutos.
CierreLa aplicación de transformaciones CSS de tipo
rotación, según las reglas de este lenguaje, conlleva a la creación de
diferentes llamativos en la presentación de bloques de texto e imágenes.
Además, exponemos con una posición diferente a la original cualquier elemento
de una página web. Con práctica
constante y paciencia, seremos los mejores profesionales en la especificación
de transformaciones disponibles en el lenguaje CSS.
