A fin de simular alto, ancho y profundidad de
elementos, crearemos transformaciones 3D en un documento CSS, según las reglas
de este lenguaje de diseño. Por desconocimiento de las propiedades de CSS para
mostrar elementos en tercera dimensión, se pierde tiempo al realizar las ediciones
en un software especial para ello. Por
lo tanto, identificaremos los diferentes valores aplicados a transform para la simulación de los elementos en 3D.
Una de las opciones utilizadas
para mostrar elementos con la simulación en tres dimensiones es aplicándoles
una transformación de sesgo. Como se muestra en la imagen, definimos los valores
específicos para doblar los elementos, tanto horizontal como verticalmente, a
fin de simular la inclusión de un largo, el ancho y la profundidad.
061-01_0806_ilu01.
Simulación de elemento sesgado
Para sesgar un elemento es
necesario agregar la propiedad transform,
luego el valor skew y dentro de los
paréntesis el número de grados para la inclinación, tanto horizontal como
vertical. En el ejemplo de la siguiente imagen, vemos como es el movimiento del
elemento cuando solo se especifica el eje horizontal o el vertical, sin embargo,
al aplicar los dos se muestra con mayor inclinación.
061-01_0806_ilu02.
Tipos de valores para sesgar un elemento
Cuando utilizamos el valor skew, el elemento tiene una inclinación diferente a cuando
utilizamos skewX, y skewY por separado. Es un detalle
importante a tomar en cuenta, porque, aunque es mínimo, en algunas
oportunidades es recomendable hacerlo por separado en lugar de un solo valor
para ambos lados.
061-01_0806_ilu03.
Presentación diferente según el valor de sesgo
Para la especificación de los elementos
en 3D es necesario realizar un estudio avanzado de las recomendaciones CSS,
debido a la extensa variedad de propiedades disponibles. En resumen, la
definición de los elementos en 3D requiere la preparación del contenedor padre,
y posteriomente especificar a los hijos la transformación requerida.
En la siguiente imagen observamos
como contenedor padre a la etiqueta body,
en la cual aplicamos dos propiedades a fin de indicarle al navegador web la perspectiva necesaria para
mostrar los elementos 3D. Luego, en la clase prueba definimos el tipo de rotación, esta etiqueta está ubicada dentro de body y por ende es el hijo.
061-01_0806_ilu04.
Documento CSS para transformación en 3D
Existe diferencia entre mostrar un elemento con
rotación simple, y otro con especificación en tercera dimensión. Esta es una de
las opciones para realizarlo, sin embargo, hay propiedades especiales de translate y scale, descritas en el estándar oficial de CSS. Al ejecutar el
código anterior en el navegador web Google
Chrome obtenemos la imagen mostrada en la siguiente ilustración.
061-01_0806_ilu05.
Presentación de elementos en 3D
Keynotes
- Una de las opciones utilizadadas para
mostrar elementos con la simulación en tres dimensiones es aplicándoles una
transformación de sesgo.
- Para sesgar un elemento es necesario agregar
la propiedad transform, luego el
valor skew y dentro de los paréntesis
el número de grados para la inclinación, tanto horizontal como vertical.
- Cuando
utilizamos el valor skew, el elemento
tiene una inclinación diferente a cuando utilizamos skewX, y skewY por
separado. Es un detalle importante a tomar en cuenta, porque, aunque en mínima,
en algunas oportunidades es recomendable hacerlo por separado en lugar de un
solo valor para ambos lados.
- Para la especificación de los elementos en
3D es necesario realizar un estudio avanzado de las recomendaciones CSS, debido
a la extensa variedad de propiedades disponibles.
- La definición de los elementos en 3D
requiere la preparación del contenedor padre, y posteriomente especificar a los
hijos la transformación requerida.
RetoCrea tres transformaciones 3D en un documento CSS,
según las reglas de este lenguaje. Debate con un compañero el tema y toma nota
de las conclusiones de ambos sobre la especificación del procedimiento y
utilidad.
¡Comparte el resultado final del reto en tu vPages y pide a un experto mediante vKonnect una sugerencia de optimización!
Tiempo disponible: entre 15 y 30 minutos.
CierreCon la creación de transformaciones 3D en un
documento CSS, según las reglas de este lenguaje, optimizamos el tiempo al
momento de crear proyectos para internet, debido a posibilidad de omitir el uso
de un software especial. Asimismo, representamos
con excelencia los elementos en una página web
con simulación de alto, ancho y profundidad. Con práctica constante y
dedicación, mostraremos elementos de 3D al usuario con profesionalidad.
