Consejos útiles

Cómo crear impresionantes gráficos en 3D en CSS3

El canal Descripción general mostró cómo hacer un cubo 3D en el servicio en línea bloggif.com. Para hacer esto, haga clic en el cubo 3D, y en la siguiente ventana comenzamos a crearlo. Para hacer esto, agregue cinco imágenes. Añadir Considere el ejemplo de los osos. Elegimos: la primera, segunda, tercera figura, reemplazamos la segunda, cuarta y quinta. A continuación, debe seleccionar la velocidad de rotación. Deje Rapide: esta es la velocidad promedio. Puede seleccionar el fondo en el que estará el cubo. Si desea sin antecedentes, solo tiene que marcar la casilla - TRANSPARENTE.

Elige azul Y la dirección de rotación. Luego presionamos el botón - CREATE MY 3 D CUBE. Aquí, tres d cubo está listo. Antes de descargar, marque: descargue sin logotipo y descargue mi Gif. Seleccionamos la carpeta para guardar, nombramos el archivo y vemos qué pasó. El resultado es un cubo, una animación gif. Eso es todo Aplica los conocimientos adquiridos. Olga Taranukha estaba contigo.

¿Por qué usar CSS?

Hay muchas formas de crear gráficos 3D en HTML. Basado en JS, Canvas, SVG, incluso las soluciones basadas en WebGL están disponibles, y todas tienen sus ventajas, pero también hay CSS.

Una solución basada en CSS prescinde de imágenes y puede usar un procesador de gráficos para acelerar el procesamiento de gráficos.

No se requieren complementos, y CSS puede vivir fuera de las paredes del lienzo en su página:

Los gráficos CSS 3D no están tan optimizados como WebGL. Un tema separado son los navegadores incompatibles. Sin embargo, la inclusión de objetos 3D en proyectos web abre nuevas áreas de trabajo y puede usarse hoy en día.

No todos los navegadores son totalmente compatibles con las transformaciones 3D utilizadas en este artículo, por lo que, por brevedad, utilizaré el prefijo -webkit.

No olvide incluir prefijos para Mozilla, Opera, MS, así como versiones sin prefijos si es necesario. Las versiones completas de CSS (con prefijos) están en los archivos del proyecto.

Lo básico: crear un cubo 3D

Primero, construiremos un cubo 3D básico colocándolo y animándolo en un espacio 3D. Primero, escriba el código HTML que representará partes de un cubo 3D:

Usé el elemento figura, pero podría usar un div, span o cualquier otro tipo de elemento a su discreción.

En este código HTML, se pueden distinguir dos partes principales: la escena en la que se coloca todo y el cubo colocado en la escena:

Preparación de la escena

Lo primero que debe hacer al construir un modelo 3D es crear un elemento que actúe como una escena.

Establezca la profundidad de la escena utilizando la propiedad de perspectiva CSS:

Establecer un valor mayor para la propiedad de perspectiva crea un efecto 3D menos notable, mientras que uno más pequeño lo hace más pronunciado.

Un valor de 800 píxeles aproximadamente es generalmente adecuado para la mayoría de los objetos pequeños, pero si crea algo más grande (como un rascacielos) puede usar un valor más bajo para crear ángulos más pronunciados.

Al establecer la propiedad de perspectiva, también debe establecer el origen de perspectiva (una propiedad que determina la posición de la cámara virtual frente a la escena), posicionada en los ejes X e Y.

Creando formas: pensamiento espacial

Crear formas 3D usando HTML y CSS implica representar un objeto como un conjunto de planos bidimensionales.

En lugar de dibujar vértices y recopilar formas de puntos y líneas, lo cual, como saben, se realiza en otros programas 3D, trabajaremos con planos bidimensionales, posicionándolos al mismo tiempo. Ensamblamos un cubo de seis planos correspondientes a los lados, el ápice y la base.

Primero, demos una forma y estilo a los elementos de la figura:

El siguiente paso es indicar dónde deben ubicarse en el espacio 3D.

Tiempo de conversión

Coloque las formas usando la propiedad de transformación. Las transformaciones CSS consisten en una serie de instrucciones que le indican al formulario cómo moverse, rotar, inclinar y escalar. Las instrucciones se leen de izquierda a derecha.

Preste atención al uso de la propiedad de estilo de transformación: cuando se configura para preservar-3d, las transformaciones a los lados del cubo se llevarán a cabo en su propio espacio 3D.

También definimos el punto relativo al que se realizan las transformaciones.

La propiedad transform-origin establece el punto en coordenadas X, Y, Z, que actúa como el centro de rotación (este es el centro del frente del elemento):

La figura delantera se desplaza 150 píxeles hacia adelante, la trasera se voltea 180 grados y se desplaza 150 píxeles hacia la parte posterior de la escena.

El orden aquí es importante: las reglas de conversión se aplican de izquierda a derecha. Para la segunda transformación, se establece un valor positivo: después de la rotación, el lado frontal está orientado hacia la parte posterior de la escena.

Como antes, el orden de las reglas de transformación es importante. Si el elemento se gira, su eje Z estará en un ángulo diferente, lo que afectará cualquier otra transformación.

Ahora coloque los otros lados:

Ahora tenemos completamente el cubo ubicado en la escena 3D.

Mover, mover

Rotemos nuestra creación 3D en el escenario usando animaciones CSS:

Las animaciones CSS se crean utilizando una secuencia de fotogramas clave. Los fotogramas clave son un conjunto de estados de objeto establecidos mediante porcentajes.

La animación comienza con una rotación cero y termina con una rotación completa del elemento alrededor del eje Y.

Aplique este conjunto de fotogramas clave con la propiedad de animación:

La animación de rotación aplicada aquí está diseñada durante 10 segundos, se repite sin cesar con una velocidad lineal constante:

Tenemos un cubo girando en el escenario, pero ahora está iluminado desde todos los lados. Para agregar una sombra sin usar más selectores, utilizaremos pseudo-selectores.

Los pseudo-selectores son algo así como elementos HTML adicionales que se pueden insertar antes y después del contenido de un elemento.

Nos proporcionan características adicionales y pueden contener degradados, colores o incluso texto. De esta forma podemos animar la atenuación en cada lado del cubo.

Necesitamos dos gradientes: uno para el caso cuando la superficie gira hacia la izquierda, el otro para la rotación hacia la derecha:

Los elementos antes y después en este ejemplo son pseudo-selectores que pueden ser estilizados y animados.

Es importante tener en cuenta que esta característica aún no es totalmente compatible con los navegadores: Google Chrome, Firefox e IE10 ofrecen diferentes niveles de soporte, y la situación puede mejorar.

Aplique animación a cada pseudo-selector para determinar cuándo mostrar / ocultar estos gradientes:

Cada animación consta de un conjunto de cuadros clave que muestran u ocultan el gradiente durante la animación.

Los siguientes son fotogramas clave aplicados a la parte posterior:

El conjunto completo de animaciones, junto con prefijos para cada navegador, se encuentra en los archivos del proyecto.

Arriba y abajo

El siguiente paso es la parte superior e inferior del cubo. Un vértice necesita un gradiente que parece que nada se mueve.

Agregue un degradado al elemento superior y gírelo en la dirección opuesta:

La base del cubo no será visible, pero podemos usarla para agregar el atributo box-shadow:

Más que solo color

En este punto, usando solo CSS, creamos un cubo animado sombreado, aunque con lados sólidos. Como trabajamos con elementos HTML, podemos jugar con el contenido.

Las caras de un cubo pueden contener imágenes, texto o incluso otras animaciones. En el siguiente ejemplo, apliqué algunas imágenes de fondo de un juego de Minecraft:

El sombreado que agregamos anteriormente todavía está presente aquí, dando a los lados del cubo una mayor sensación de profundidad. Este efecto funcionará para cualquier contenido en el elemento figura.

Si el sombreado y la sombra animados no son suficientes, podemos agregar un poco más de brillo a la escena usando filtros elegantes de WebKit (tenga en cuenta que en este momento esta función solo es posible con WebKit):

Agregar contenido

Agregue el contenido que cae en el campo de visión del usuario cuando se gira el cubo. Esto sucederá en el lado derecho del cubo. Conectamos un pequeño JavaScript al trabajo para llamar al botón "Seguir" (disponible en la página de botones de Twitter).

El elemento de figura con derecho de clase debería contener algo como esto:

El botón Seguir se coloca agregando una regla de iframe al CSS:

Tweet en un cubo

Twitter proporciona una manera fácil de obtener los últimos tweets como widgets. Para instalar el widget, inicie sesión en su cuenta de Twitter y vaya a la página del widget de Twitter.

Seleccione "Crear nuevo botón", luego ingrese su nombre de usuario de Twitter en el campo Nombre de usuario. En este ejemplo, usamos el inicio de sesión de netmag.

Haga clic en el botón Crear widget para generar el código de inserción.

Podemos estilizar el widget y establecer el ancho, la altura y algunos valores de datos en el código. Reemplace YOUR_WIDGET_ID con el identificador proporcionado en su código de inserción:

Transformaciones

Para sombrear, no necesitamos animación con fotogramas clave: aparecerá cuando desplace el mouse o active un evento.

Agregue algunas transiciones al sombreado de los pseudo-selectores:

Para el pseudo-selector en el lado derecho, se establece el valor de opacidad de 0.4. Esto agrega un poco de sombra y puede animar la opacidad para que la cara se vuelva más clara cuando gira hacia el frente.

A la derecha: después de que se oculta el pseudo-selector, ya que no giraremos el cubo tanto como sea necesario. El lado frontal se oscurece, sin embargo, es más claro que el lado derecho cuando gira hacia adelante:

Animación flotante

Ahora, agregando efectos de sombreado, crearemos un efecto animado de "mirón" cuando el usuario pase el cursor sobre el cubo utilizando el estado de desplazamiento CSS:

Cuando pasa el mouse, el cubo gira 50 grados hacia la izquierda. Esta transformación se realiza como una transición suave aplicando la propiedad de transición.

Al mismo tiempo, la opacidad de los pseudo-selectores en los lados frontal y derecho del cubo entra en un valor de 0.2.

El resultado de todas estas transiciones es un hermoso efecto de rotación 3D que le permite ocultar contenido adicional y mostrarlo si el usuario se desplaza sobre el cubo.

El código HTML y CSS completo se puede encontrar en los archivos del proyecto:

La creación de objetos a partir de elementos HTML planos tiene una serie de limitaciones: cualquier objeto que cree debe hacerse combinando formas planas para obtener el resultado final.

Es difícil crear objetos curvos, como tubos y esferas, sin utilizar una gran cantidad de elementos, por lo que esta solución es más adecuada para objetos más simples.

Pero recurriendo al uso de sombras y animaciones, puede obtener resultados impresionantes con estructuras simples.

Rendimiento y pruebas

Al crear objetos en 3D, debe recordar que el rendimiento del navegador y la velocidad de la computadora pueden variar mucho. CSS, de hecho, no está optimizado para escenas 3D complejas cargadas gráficamente, por lo que debe tener cuidado al trabajar con proyectos públicos.

Realice pruebas en todas las plataformas: los visitantes también pueden usar dispositivos móviles o computadoras obsoletas y lentas.

Y aunque es solo cuestión de tiempo antes de que todos los navegadores admitan transformaciones 3D, gradientes y todos los toques elegantes que usamos aquí, la realidad es que la mayoría de los navegadores todavía no los admiten.

Debemos asegurarnos de que los visitantes que usan versiones anteriores de navegadores no obtengan una página distorsionada.

Un enfoque para resolver este problema es utilizar la detección de características y mostrar una versión alternativa para los navegadores que no admiten las propiedades deseadas.

En este caso, utilizaremos el script Modernizr para averiguar si las transformaciones 3D son compatibles y, si no, mostrar una imagen estática.

Para comenzar, habilite Modernizr en el encabezado HTML:

Cuando se carga, la clase csstransforms3d se insertará en la etiqueta. Luego usaremos esta información para mostrar u ocultar la opción de copia de seguridad:

En este ejemplo, una imagen estática es una alternativa. Use el elemento div de respaldo para representar contenido bidimensional en un navegador o mensaje alternativo:

Próximos pasos

Un cubo 3D estilizado probablemente no sea lo primero que se le pide a la mayoría de los clientes de diseño web, pero algunos de los enfoques anteriores pueden tener diferentes usos.

Puede crear un efecto de transición 3D cuando pasa el cursor sobre el logotipo, una forma atractiva de demostrar un nuevo producto, o utilizar estos enfoques para presentar y navegar por datos complejos. El uso del eje Z en el diseño abre la puerta a muchas ideas interesantes y divertidas.

Esta publicación es una traducción del artículo "Cómo crear impresionantes gráficos en 3D en CSS3" preparado por el amable equipo del proyecto de tecnología de Internet