10 impresionantes proyectos 3D creados completamente con CSS y JavaScript

La web ha recorrido un largo camino desde el acceso telefónico a Internet y las páginas de GeoCities. Los sitios web ahora son totalmente receptivos y accesibles desde dispositivos con pantalla táctil. Pero los navegadores modernos han llevado las cosas aún más allá del diseño web "convencional".

Es posible crear sorprendentes efectos 3D en el navegador utilizando solo tecnologías de interfaz. Y en esta publicación, mostraré mis proyectos web 3D favoritos que muestran cuán lejos ha llegado la web en unas pocas décadas.

Cuadros de perspectiva

Lo creas o no, esta animación de cuadro se realizó con transformaciones CSS3 puras. Los cubos reales son bastante fáciles de renderizar usando CSS y los colores alternos funcionan con diferentes clases.

La animación utiliza animaciones de fotogramas clave en bucle para dar la ilusión de que estas cajas rebotan en el espacio 3D. Al hacer clic en cualquiera de los botones de perspectiva en la esquina superior derecha, incluso puede ver este modelo 3D desde diferentes ángulos. ¡Muy genial!

Gráfico CSS3 puro

Un ejemplo más de animación CSS3 pura es este gráfico de barras creado por Ana Tudor. Utiliza un contenedor HTML simple con cuatro divisiones internas que representan los cuatro lados de cada rectángulo.

Las barras son bastante fáciles de animar usando CSS3 y todas crecen a diferentes alturas. Pero la parte más impresionante es cómo toda esta animación rota los ángulos de visión incluso mientras el gráfico de barras está creciendo.

Esto usa mucho código Sass para automatizar las animaciones con funciones de cálculo, por lo que es un poco técnico. Pero si está tratando de aprender más sobre 3D, entonces esta es una pluma sólida para sumergirse.

Visión de túnel

Para una experiencia de navegador Webkit trippy, eche un vistazo a este túnel 3D creado con solo algunas transformaciones CSS3 y propiedades Sass.

Los colores alternos se ejecutan a través de un Sass for loop que alterna el valor de color HSL después de un cierto período de tiempo. Estos bucles dan la ilusión de que estás viajando a través de un túnel de piezas de confeti de colores indefinidamente. ¡Bastante salvaje!

Puede que no parezca nada especial y definitivamente no es práctico para un sitio web importante. Pero es un testimonio de cuánto puede hacer con un poco de creatividad y conocimientos de codificación.

iPhone 3D en CSS

El iPhone 4 ofreció un diseño radicalmente nuevo y entusiasmó a todos por el nuevo teléfono inteligente asesino. El desarrollador Jonathan Levaillant debe haber disfrutado mucho del iPhone 4 ya que recreó el diseño en CSS puro.

A medida que avanzan los dispositivos giratorios, este es bastante genial. Se parece a un iPhone y la banda exterior incluso refleja la luz con un degradado realista. La pantalla del iPhone reproduce un video mp4 alojado en los servidores de Apple y también se distorsiona correctamente en perspectiva.

Lo más loco de esto es cómo se basa únicamente en CSS para todo. Estaré emocionado en otros 10 años cuando los iPhones CSS3 puros sean completamente interactivos en el navegador.

sistema solar 3D

La Vía Láctea es nuestro pequeño rincón del universo y está completamente representada en este increíble bolígrafo creado por Julian Garnier.

Utiliza mucho CSS, pero la mayoría de los efectos personalizables se basan en JavaScript. Esto le permite cambiar la velocidad, el tamaño y la distancia de varios planetas.

Incluso puede cambiar entre la vista 3D y una vista aérea 2D con relativa facilidad. ¡Habla sobre un uso estelar del desarrollo frontend!

cubos sombreados

Estos simples cubos sombreados pueden no parecer mucho. Están integrados en CSS y rotan automáticamente en un eje usando animaciones CSS3.

Pero hay una configuración interactiva donde puedes animar los cubos al pasar el mouse. Este es definitivamente un truco genial y se basa en algunas técnicas raras de CSS, incluidas las :hover y :checked junto con el tilde(~) selector .

Carrusel 3D CSS

Los carruseles de imágenes son excelentes para exhibir gráficos, fotos e incluso videos en rotación. Y con este carrusel CSS3 puedes llevar estos controles deslizantes divertidos a un nivel completamente nuevo.

Este carrusel 3D muy básico se basa en eventos de clic para animar entre diferentes elementos. El estilo 3D es sorprendentemente detallado y se basa únicamente en el código CSS.

El único JavaScript que se necesita aquí es alternar entre los botones siguiente/anterior y animar los estilos 3D en su lugar. Y esto es algo que podrías usar en un sitio real, por lo que puede tener un uso práctico en el diseño web moderno.

Enfría al león

Aquí hay algo un poco menos práctico pero increíblemente divertido de usar. Este renderizado de león en 3D de Karim Maaloul usa Three.js para crear un juego divertido en el que puedes soplar un poco de aire fresco sobre el sudoroso león.

A medida que mueves el abanico por la página con el cursor, la mirada del león te seguirá. Luego, simplemente haga clic para encender el ventilador motorizado y observe la emoción del león mientras le envía una corriente de aire fresco.

El desarrollador llegó incluso a crear áreas de aleteo en la melena del león junto con movimiento en los bigotes.

Este es otro ejemplo detallado de hasta dónde han llegado los efectos 3D.

Controlador 3D NES

Los juegos clásicos dejaron su huella en la generación actual de codificadores y puedes verlo con el controlador 3D NES de Johan van Tongeren renderizado en CSS3 puro.

Funciona mejor en los navegadores Chrome/WebKit, aunque también debería funcionar bien en Firefox. Realmente es más un experimento para ver hasta dónde ha llegado CSS, ¡así que no esperes que sea perfecto!

órbitas de Kepler

No puedo imaginar cuánto tiempo llevó construir este modelo realista de la trayectoria de la órbita de Kepler. Este modelo muestra el movimiento de un cuerpo con respecto a otro en el espacio, y en este caso el desarrollador Danie Clawson hizo un trabajo increíble.

Todo este modelo usa CSS para imágenes y Three.js para los efectos 3D. En la esquina superior izquierda, encontrará un cuadro de opciones donde puede cambiar muchas de las variables de la órbita para afectar la velocidad, el tamaño y la ubicación del objeto.

Incluso puede notar que el objeto en órbita usa una luz realista con sombreado según el lado que apunta hacia el sol. Esto es tremendamente impresionante y pertenece como el número 1 en esta lista por la inmensa atención al detalle.

Espero que estos ejemplos puedan inspirarte para aprender más sobre el desarrollo frontend y tal vez incluso crear tus propios proyectos 3D.