10 projetos 3D impressionantes construídos inteiramente com CSS e JavaScript

A web percorreu um longo caminho desde a Internet discada e as páginas GeoCities. Os sites agora são totalmente responsivos e acessíveis a partir de dispositivos touchscreen. Mas os navegadores modernos levaram as coisas ainda mais além do design da web “mainstream”.

É possível criar efeitos 3D incríveis no navegador usando apenas tecnologias front-end. E neste post, mostrarei meus projetos de web 3D favoritos que mostram o quão longe a web chegou em poucas décadas.

Caixas de perspectiva

Acredite ou não, essa animação de caixa foi feita com transformações CSS3 puras. Os cubos reais são muito fáceis de renderizar usando CSS e as cores alternadas funcionam com diferentes classes.

A animação usa animações de quadro-chave em loop para dar a ilusão dessas caixas saltando no espaço 3D. Ao clicar em qualquer um dos botões de perspectiva no canto superior direito, você pode até visualizar este modelo 3D de vários ângulos. Muito legal!

Gráfico CSS3 puro

Mais um exemplo de animação CSS3 pura é este gráfico de barras criado por Ana Tudor. Ele usa um contêiner HTML simples com quatro divs internos representando os quatro lados de cada retângulo.

As barras são fáceis de animar usando CSS3 e todas crescem em alturas variadas. Mas a parte mais impressionante é como toda essa animação gira os ângulos de visão mesmo enquanto o gráfico de barras está crescendo.

Isso usa muito código Sass para automatizar as animações com funções de cálculo, por isso é um pouco técnico. Mas se você está tentando aprender mais sobre 3D, então esta é uma caneta sólida para mergulhar.

Visão do túnel

Para uma experiência de navegador Webkit alucinante, dê uma olhada neste túnel 3D criado com apenas algumas transformações CSS3 e propriedades Sass.

As cores alternadas passam por um loop Sass for que alterna o valor da cor HSL após um determinado período de tempo. Este loop dá a ilusão de que você está viajando por um túnel de peças coloridas de confete indefinidamente. Bem selvagem!

Pode não parecer nada de especial e definitivamente não é prático para um grande site. Mas é uma prova do quanto você pode fazer com alguma criatividade e conhecimento de codificação.

iPhone 3D em CSS

O iPhone 4 ofereceu um design radicalmente novo e deixou todos empolgados com o novo smartphone matador. O desenvolvedor Jonathan Levaillant deve ter gostado muito do iPhone 4, pois recriou o design em CSS puro.

Como dispositivos rotativos, este é muito legal. Parece um iPhone e a banda externa ainda reflete a luz com um gradiente realista. A tela do iPhone reproduz um vídeo mp4 hospedado nos servidores da Apple e também distorce corretamente a perspectiva.

O mais insano disso é como ele depende exclusivamente de CSS para tudo. Ficarei empolgado em mais 10 anos quando iPhones CSS3 puros forem totalmente interativos no navegador.

Sistema Solar 3D

A Via Láctea é o nosso cantinho do universo e está totalmente representada nesta caneta incrível criada por Julian Garnier.

Ele usa muito CSS, mas a maioria dos efeitos personalizáveis ​​depende do JavaScript. Isso permite que você altere a velocidade, o tamanho e a distância de vários planetas.

Você pode até alternar entre a visualização 3D e uma visualização 2D aérea com relativa facilidade. Fale sobre um uso estelar do desenvolvimento frontend!

Cubos Sombreados

Esses cubos sombreados simples podem não parecer muito. Eles são construídos em CSS e giram automaticamente em um eixo usando animações CSS3.

Mas há uma configuração interativa onde você pode animar os cubos ao passar o mouse. Este é definitivamente um truque legal e se baseia em algumas técnicas CSS raras, incluindo as pseudo-classes :hover e :checked junto com o tilde(~) selector .

Carrossel 3D CSS

Os carrosséis de imagens são ótimos para mostrar gráficos, fotos e até vídeos em rotação. E com este carrossel CSS3 você pode levar esses sliders divertidos a um nível totalmente novo.

Este carrossel 3D muito básico depende de eventos de clique para animar entre diferentes elementos. O estilo 3D é surpreendentemente detalhado e depende puramente do código CSS.

O único JavaScript necessário aqui é alternar entre os botões próximo/anterior e animar os estilos 3D no lugar. E isso é realmente algo que você poderia usar em um site real para que possa ter um uso prático no design moderno da web.

Acalme o Leão

Aqui está algo um pouco menos prático, mas ainda incrivelmente divertido de usar. Este leão renderizado em 3D por Karim Maaloul usa Three.js para criar um jogo divertido onde você pode soprar um pouco de ar fresco no leão suado.

Conforme você move o leque pela página com o cursor, o olhar do leão o seguirá. Em seguida, basta clicar para ligar o ventilador motorizado e observar a excitação do leão enquanto você envia um fluxo de ar fresco na direção dele.

O desenvolvedor chegou ao ponto de criar áreas de agitação na juba do leão junto com o movimento nos bigodes.

Este é mais um exemplo detalhado de quão longe os efeitos 3D chegaram.

Controlador NES 3D

Os jogos clássicos deixaram sua marca na geração atual de codificadores e você pode ver isso com o controlador NES 3D de Johan van Tongeren renderizado em CSS3 puro.

Funciona melhor nos navegadores Chrome/WebKit, embora também deva renderizar bem no Firefox. É realmente mais um experimento para ver até onde o CSS chegou, então não espere que seja perfeito!

Órbitas Kepler

Não consigo imaginar quanto tempo levou para construir este modelo realista de um caminho orbital Kepler. Este modelo mostra o movimento de um corpo em relação a outro no espaço, e neste caso a desenvolvedora Danie Clawson fez um trabalho incrível.

Todo este modelo usa CSS para efeitos visuais e Three.js para efeitos 3D. No canto superior esquerdo você encontrará uma caixa de opções onde você pode alterar muitas das variáveis ​​de órbita para afetar a velocidade, tamanho e posicionamento do objeto.

Você pode até notar que o objeto em órbita usa luz realista com sombreamento com base em qual lado está apontando para o sol. Isso é extremamente impressionante e pertence ao primeiro lugar nesta lista pela imensa atenção aos detalhes.

Espero que esses exemplos possam inspirar você a aprender mais sobre desenvolvimento frontend e talvez até criar seus próprios projetos 3D.