A teia é frequentemente vista como um meio decididamente bidimensional. E, para ser justo, é. Foi para isso que foi projetado.
Além do mais, a adição de gráficos tridimensionais, processados ao vivo, tradicionalmente exigia plugins. A Macromedia nos deu o Shockwave, o Unity nos deu o Unity Web Player e, durante todo esse tempo, usamos gráficos 3D para jogos, principalmente.
HTML5, CSS3 e alguns JavaScript criativos fizeram muito para mudar isso, no entanto. Ainda é usado principalmente para jogos, mas você pode ir mais além e integrar os gráficos em um site normal com mais facilidade do que nunca.
Claro, ainda temos preocupações com usabilidade. Um site que depende de gráficos 3D para navegação ou conteúdo essencial ainda é uma péssima ideia. No entanto, quando usado com aprimoramento progressivo, o 3D é uma maneira viável, e até mesmo favorável ao desempenho, de elevar as coisas.
Para esse fim, eu apresento voxel.css .
O voxel.css é um framework que usa CSS3 para fazer o trabalho pesado de renderização de objetos 3D. O JavaScript é usado para adicionar interatividade, acionar as animações e praticamente todo o resto.
Bem, isso é CSS que estamos falando. Você não vai conseguir gráficos em nível de Crysis. Como o nome desta estrutura sugere, o que você obtém é um monte de cubos. Pense no Minecraft no navegador. (E alguém vai construir um clone de Minecraft com isso em três ... dois ...)
Ainda assim, você pode fazer algumas coisas impressionantes com gráficos em blocos. Pense nisso como levar a arte de 8 bits a um nível totalmente novo.
A implementação básica do voxel.css requer apenas a inclusão da biblioteca e 15 linhas de código. Isso cria uma cena virtual que permite a você editar seus modelos, estilo apontar e clicar.
Você pode exibir essas cenas em qualquer página da Web e animá-las conforme desejado.
Use um PNG para transparência, um GIF para animação ou um arquivo SVG para escalabilidade ilimitada. Use um JPG por motivos desconhecidos ou o formato WebP porque você gosta de coisas que ainda não estão implementadas em todos os navegadores.
Há até uma demonstração que usa imagens ao vivo da sua webcam como texturas para os blocos.
Mais uma vez, é CSS3. Você pode usar o poder superior de renderização da placa gráfica de um dispositivo (ou chip, conforme o caso) para exibir seu trabalho. Você não terá que se preocupar com gráficos agitados em nada, mas o mais lento dos dispositivos móveis. (Você deve estar usando um retorno para aqueles em qualquer caso.)
O voxel.css é uma maneira simples e sensata de obter alguma bondade tridimensional no seu aplicativo da Web, página, site ou jogo. Experimente, veja as demonstrações e veja se é certo para o seu projeto.