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.

Crea 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.

Con 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.