Dicas úteis

Como criar gráficos 3D impressionantes em CSS3

O canal Visão geral mostrou como criar um cubo 3D no serviço online bloggif.com. Para fazer isso, clique no cubo 3D e, na próxima janela, começamos a criá-lo. Para fazer isso, adicione cinco imagens. Adicionar. Considere o exemplo de ursos. Nós escolhemos - a primeira, segunda, terceira figura, substitua a segunda, quarta e quinta. Em seguida, você precisa selecionar a velocidade de rotação. Deixe o Rapide - essa é a velocidade média. Você pode selecionar o plano de fundo em que o cubo estará. Se você deseja um plano de fundo, basta marcar a caixa - TRANSPARENTE.

Escolha azul. E a direção da rotação. Em seguida, pressionamos o botão - CRIAR MEU CUBO 3D. Agora, o cubo três d está pronto. Antes de baixar, marque - faça o download sem logotipo e faça o download do meu Gif. Selecionamos a pasta para salvar, nomeie o arquivo e veja o que aconteceu. O resultado foi um cubo de animação gif. Isso é tudo. Aplique o conhecimento adquirido. Olga Taranukha estava com você.

Por que usar CSS?

Existem várias maneiras de criar gráficos 3D em HTML. Com base em JS, Canvas, SVG, até soluções baseadas em WebGL estão disponíveis, e todas elas têm suas vantagens, mas também há CSS.

Uma solução baseada em CSS dispensa imagens e pode usar um processador gráfico para acelerar o processamento gráfico.

Nenhum plug-in é necessário e o CSS pode viver fora das paredes da tela da sua página:

Os gráficos CSS 3D não são tão otimizados quanto o WebGL. Um tópico separado são navegadores incompatíveis. No entanto, a inclusão de objetos 3D em projetos da web abre novas áreas de trabalho e pode ser usada hoje.

Nem todos os navegadores são totalmente compatíveis com as transformações 3D usadas neste artigo, portanto, por questões de brevidade, usarei o prefixo -webkit.

Não se esqueça de incluir prefixos para Mozilla, Opera, MS e versões sem prefixos, se necessário. Versões completas de CSS (com prefixos) estão nos arquivos do projeto.

O básico: criando um cubo 3D

Primeiro, criaremos um cubo 3D básico, colocando-o e animando-o no espaço 3D. Primeiro, escreva o código HTML que representará partes de um cubo 3D:

Eu usei o elemento figure, mas você pode usar div, span ou qualquer outro tipo de elemento a seu critério.

Nesse código HTML, duas partes principais podem ser distinguidas: a cena na qual tudo é colocado e o cubo colocado na cena:

Preparação da cena

A primeira coisa a fazer ao criar um modelo 3D é criar um elemento que atue como uma cena.

Defina a profundidade da cena usando a propriedade de perspectiva CSS:

Definir um valor maior para a propriedade de perspectiva cria um efeito 3D menos perceptível, enquanto um menor torna-o mais pronunciado.

Um valor de 800 pixels ou mais é geralmente adequado para a maioria dos objetos pequenos, mas se você criar algo maior (como um arranha-céu), poderá usar um valor mais baixo para criar ângulos mais pronunciados.

Ao definir a propriedade de perspectiva, você também deve definir a origem da perspectiva (uma propriedade que determina a posição da câmera virtual de frente para a cena), posicionada nos eixos X e Y.

Criando formas: pensamento espacial

Criar formas 3D usando HTML e CSS envolve representar um objeto como um conjunto de planos bidimensionais.

Em vez de desenhar vértices e coletar formas de pontos e linhas, o que, como você sabe, é feito em outros programas 3D, trabalharemos com planos bidimensionais, posicionando-os ao mesmo tempo. Montamos um cubo de seis planos correspondentes aos lados, ápice e base.

Primeiro, vamos dar aos elementos da figura uma forma e um estilo:

O próximo passo é indicar onde eles devem estar localizados no espaço 3D.

Tempo de conversão

Coloque as formas usando a propriedade transform. As transformações de CSS consistem em uma série de instruções que informam ao formulário como mover, girar, inclinar e dimensionar. As instruções são lidas da esquerda para a direita.

Preste atenção ao uso da propriedade de estilo de transformação: quando estiver configurada para preservar-3d, as transformações nas laterais do cubo serão realizadas em seu próprio espaço 3D.

Também definimos o ponto em relação ao qual as transformações são executadas.

A propriedade transform-origin define o ponto nas coordenadas X, Y, Z, que atua como o centro de rotação (este é o meio da frente do elemento):

A figura frontal é deslocada 150 pixels para frente, a traseira é girada 180 graus e deslocada 150 pixels para o fundo da cena.

A ordem aqui é importante - as regras de conversão são aplicadas da esquerda para a direita. Para a segunda transformação, um valor positivo é definido: após a rotação, o lado frontal fica voltado para a parte de trás da cena.

Como antes, a ordem da transformação é importante. Se o elemento for girado, seu eixo Z estará em um ângulo diferente, o que afetará qualquer outra transformação.

Agora coloque os outros lados:

Agora, temos completamente o cubo localizado na cena 3D.

Mover, mover

Vamos rotacionar nossa criação 3D no palco usando animações CSS:

As animações CSS são criadas usando uma sequência de quadros-chave. Os quadros-chave são um conjunto de estados de objetos estabelecidos usando porcentagens.

A animação começa com uma rotação zero e termina com uma rotação completa do elemento em torno do eixo Y.

Aplique este conjunto de quadros-chave com a propriedade de animação:

A animação de rotação aplicada aqui é projetada por 10 segundos, se repete infinitamente com uma velocidade linear constante:

Temos um cubo girando no palco, mas agora está iluminado por todos os lados. Para adicionar uma sombra sem usar mais seletores, usaremos pseudo-seletores.

Os pseudo-seletores são algo como elementos HTML adicionais que podem ser inseridos antes e depois do conteúdo de um elemento.

Eles nos fornecem recursos adicionais e podem conter gradientes, cores ou até texto. Dessa forma, podemos animar o escurecimento de cada lado do cubo.

Precisamos de dois gradientes: um para o caso em que a superfície vira para a esquerda e o outro para rotação para a direita:

Os elementos antes e depois neste exemplo são pseudo-seletores que podem ser estilizados e animados.

É importante observar que esse recurso ainda não é totalmente suportado pelos navegadores - Google Chrome, Firefox e IE10 oferecem diferentes níveis de suporte - e a situação pode melhorar.

Aplique animação a cada pseudo-seletor para determinar quando exibir / ocultar esses gradientes:

Cada animação consiste em um conjunto de quadros principais que mostram ou ocultam o gradiente durante a animação.

A seguir, os quadros-chave aplicados ao verso:

O conjunto completo de animações, juntamente com prefixos para cada navegador, está nos arquivos do projeto.

Superior e inferior

O próximo passo é a parte superior e inferior do cubo. Um vértice precisa de um gradiente que parece que nada está se movendo.

Adicione um gradiente ao elemento superior e gire-o na direção oposta:

A base do cubo não estará visível, mas podemos usá-lo para adicionar o atributo box-shadow:

Mais do que apenas cores

Nesse ponto, usando apenas CSS, criamos um cubo animado sombreado, embora com lados sólidos. Como trabalhamos com elementos HTML, podemos brincar com o conteúdo.

As faces de um cubo podem conter imagens, texto ou até outras animações. No exemplo abaixo, apliquei algumas imagens de plano de fundo de um jogo Minecraft:

O sombreamento que adicionamos anteriormente ainda está presente aqui, dando aos lados do cubo uma sensação mais profunda de profundidade. Esse efeito funcionará para qualquer conteúdo no elemento da figura.

Se sombreamento e sombra animados não forem suficientes, podemos adicionar um pouco mais de brilho à cena usando filtros sofisticados do WebKit (observe que, no momento, essa função só é possível com o WebKit):

Adicionar conteúdo

Adicione o conteúdo que cai no campo de visão do usuário quando o cubo é girado. Isso acontecerá no lado direito do cubo. Conectamos um pouco de JavaScript ao trabalho para chamar o botão "Seguir" (disponível na página de botões do Twitter).

O elemento de figura com classe à direita deve conter algo como isto:

O botão Seguir é colocado adicionando uma regra iframe ao CSS:

Tweet em um cubo

O Twitter fornece uma maneira fácil de obter os tweets mais recentes como widgets. Para instalar o widget, efetue login na sua conta do Twitter e vá para a página do widget do Twitter.

Selecione "Criar novo botão" e digite seu nome de usuário no Twitter no campo Nome de usuário. Neste exemplo, usamos o login netmag.

Clique no botão Criar widget para gerar o código de incorporação.

Podemos estilizar o widget e definir a largura, altura e alguns valores de dados no código. Substitua YOUR_WIDGET_ID pelo identificador fornecido no seu código de incorporação:

Transformações

Para sombreamento, não precisamos de animação com quadros-chave: ela aparecerá quando você passar o mouse ou acionar um evento.

Adicione algumas transições ao sombreamento dos pseudo-seletores:

Para o pseudo-seletor no lado direito, o valor de opacidade de 0,4 é definido. Isso adiciona um pouco de sombra e você pode animar a opacidade para que o rosto fique mais claro quando você virar para a frente.

O certo: depois que o pseudo-seletor estiver oculto, pois não giraremos o cubo tanto quanto necessário. A frente está escura, no entanto, é mais clara que a direita quando se vira para a frente:

Animação suspensa

Agora, adicionando efeitos de sombreamento, criaremos um efeito de “espiar” animado quando o usuário passar o mouse sobre o cubo usando o estado de foco CSS:

Quando você passa o mouse, o cubo gira 50 graus para a esquerda. Essa transformação é executada como uma transição suave, aplicando a propriedade de transição.

Ao mesmo tempo, a opacidade dos pseudo-seletores nas laterais frontal e direita do cubo atinge um valor de 0,2.

O resultado de todas essas transições é um belo efeito de rotação 3D que permite ocultar conteúdo adicional - e mostrá-lo se o usuário passar o mouse sobre o cubo.

O código HTML e CSS completo pode ser encontrado nos arquivos do projeto:

A criação de objetos a partir de elementos HTML simples possui várias limitações: qualquer objeto que você criar deve ser feito combinando formas simples para obter o resultado final.

É difícil criar objetos curvos, como tubos e esferas, sem usar um grande número de elementos, portanto, esta solução é mais adequada para objetos mais simples.

Mas, recorrendo ao uso de sombras e animações, você pode obter resultados impressionantes com estruturas simples.

Desempenho e Teste

Ao criar objetos 3D, lembre-se de que o desempenho do navegador e a velocidade do computador podem variar bastante. O CSS, de fato, não é otimizado para cenas 3D complexas carregadas graficamente, portanto, você precisa ter cuidado ao trabalhar com projetos públicos.

Teste em plataformas: os visitantes também podem usar dispositivos móveis ou computadores lentos e desatualizados.

E embora seja apenas uma questão de tempo até que todos os navegadores suportem transformações 3D, gradientes e todos os toques elegantes que usamos aqui, a realidade é que a maioria dos navegadores ainda não os suporta.

Devemos garantir que os visitantes que usam versões mais antigas dos navegadores não obtenham uma página distorcida.

Uma abordagem para solucionar esse problema é usar a detecção de recursos e exibir uma versão alternativa para navegadores que não suportam as propriedades desejadas.

Nesse caso, usaremos o script Modernizr para descobrir se as transformações 3D são suportadas e, se não, exibir uma imagem estática.

Para começar, ative o Modernizr no cabeçalho HTML:

Quando carregada, a classe csstransforms3d será inserida na tag. Em seguida, usaremos essas informações para mostrar ou ocultar a opção de backup:

Neste exemplo, uma imagem estática é uma alternativa. Use o elemento div de fallback para representar o conteúdo bidimensional em um navegador ou em uma mensagem alternativa:

Próximas etapas

Um cubo 3D estilizado provavelmente não é a primeira coisa que a maioria dos clientes de design da web deve fazer, mas algumas das abordagens acima podem ter usos diferentes.

Você pode criar um efeito de transição 3D ao passar o mouse sobre o logotipo - uma maneira atraente de demonstrar um novo produto - ou usar essas abordagens para apresentar e navegar por dados complexos. O uso do eixo Z no design abre as portas para muitas idéias interessantes e divertidas.

Esta publicação é uma tradução do artigo "Como criar gráficos 3D impressionantes em CSS3", preparado pela equipe amigável do projeto de tecnologia da Internet