Con el propósito de controlar los diferentes
posicionamientos disponibles para elementos de una página web, aplicaremos rotaciones avanzadas de CSS, según las
recomendaciones oficiales de este lenguaje. Por
desconocimiento de los tipos de origen para una rotación, modificamos de forma
simple una imagen sin lograr captar la atención necesaria del usuario. Po lo
tanto, identificaremos las propiedades de CSS para rotaciones avanzadas y la traslación
de elementos a posiciones diferentes de la original.
Cuando aplicamos rotaciones a un
elemento se basan en un origen o un centro, para realizar el movimiento
necesario. Por ejemplo, al aplicar la propiedad de transformación transform con valor rotate en -10deg, el
valor de origen por defecto es 50%, debido a ello el ángulo de rotación toma
como referencia en punto medio del elemento, tal como se muestra en el primer
elemento de la imagen.
061-01_0804_ilu01.
Tipos de origen para la rotación
En la imagen anterior, para el
origen de la rotación:
- El primer
valor definido corresponde al desplazamiento horizontal del elemento.
- El segundo
valor es el desplazamiento vertical.
Por lo tanto, en el segundo
elemento, al especificar 100% el punto se mueve totalmente a la derecha en la
parte horizontal, y al definir 0% el punto se muestra hacia arriba.
Los valores de orígenes también se
expresan en porcentajes, píxeles, valores numéricos o posiciones en letras. En
los ejemplos de la siguiente imagen se encuentran otras especificaciones:
- La primera
tiene 0 para el lado horizontal, y verticalmente está definido en 50.
- La segunda
tiene 50 para el lado horizontal, y 0 en el desplazamiento vertical.
061-01_0804_ilu02.
Diferentes especificaciones de origen
El origen de la transformación se
define con la propiedad transform-origin,
y solo es válido cuando se define con la propiedad transform previamente.
061-01_0804_ilu03.
Imagen con diferentes desplazamientos
En la ilustración anterior,
tenemos tres presentaciones de la imagen:
- La primera
se muestra sin modificaciones.
- La del
medio definimos una rotación de 30 grados y así es como se muestra.
- La última
especificamos center y top, por este motivo, el origen para la
transformación es centro, horizontalmente, y arriba verticalmente.
Existe la posibilidad de mostrar
un elemento trasladado a una nueva posición, para ello utilizamos la propiedad transform con el valor translate, al cual le definimos:
- TranslateX:
para definir un desplazamiento horizontal hacia la derecha.
- TranslateY:
para especificar un desplazamiento vertical hacia abajo.
- Translate:
para establecer un desplazamiento tanto horizontal como vertical.
061-01_0804_ilu04.
Tipos de traslación
Es posible expresar los números en
negativos con la finalidad de mostrar el posicionamiento hacia arriba y a la
izquierda.
Keynotes
- Cuando aplicamos rotaciones a un elemento se
basan en un origen o un centro, para realizar el movimiento necesario. Por
ejemplo, al aplicar la propiedad de transformación transform con valor rotate en
-10deg, el valor de origen por
defecto es 50%.
- Para el origen de la rotación: El primer
valor definido corresponde al desplazamiento horizontal del elemento. El
segundo valor es el desplazamiento vertical.
- Los valores de orígenes se expresan en
porcentajes, píxeles, valores numéricos o posiciones en letras.
- El origen de la transformación se define con
la propiedad transform-origin, y solo
es válido cuando se define con la propiedad transform.
- Existe la posibilidad de mostrar un elemento
trasladado a una nueva posición, para ello utilizamos la propiedad transform con el valor translate.
RetoAplica a elementos diferentes de un documento HTML
tres rotaciones avanzadas mediante un documento CSS, según las recomendaciones
oficiales de este lenguaje.
¡Comparte el resultado final del reto en tu vPages y pide a tus compañeros un
comentario de optimización!
Tiempo disponible: entre 15 y 30 minutos.
CierreMediante la aplicación de rotaciones avanzadas de
CSS, según las recomendaciones oficiales de este lenguaje, modificamos con
vistosidad la presentación de las imágenes y los bloques de textos para llamar
la atención del usuario. También, controlamos los diferentes posicionamientos
disponibles para elementos de una página web.
Con determinación y organización lograremos la especificación correcta de
rotaciones disponibles en el lenguaje CSS.
