Como usar a perspectiva com opções de transformação para projetar paredes de fotos 3D em Divi
Publicados: 2019-05-04Projetar uma parede de fotos 3D parece algo possível apenas com um editor de fotos como o Photoshop ou Sketch. Mas isso não! Hoje em dia, há uma tonelada de designs aparentemente impossíveis que você pode construir na web usando apenas CSS. E com um criador de páginas como o Divi, você nem precisa saber muito sobre CSS para criar esse tipo de design. É por isso que hoje vou mostrar como projetar paredes de fotos 3D no Divi.
O truque é usar a propriedade css da perspectiva. Com apenas uma única linha de CSS adicionada a um elemento pai, você pode usar as opções de transformação integradas do Divi para girar os itens em designs 3D realistas.
Vamos começar!
Espiada
Aqui está uma prévia das paredes da foto 3D que iremos projetar hoje.
Baixe o layout de exemplos de design 3D Photo Wall GRATUITAMENTE
Para colocar suas mãos nos designs de parede de fotos 3D deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.
Vamos para o tutorial, vamos?
Inscreva-se no nosso canal no Youtube
Começando
Para começar com este tutorial, tudo que você precisa é o Divi Theme instalado e ativo. Você precisará de algumas imagens para trabalhar, então fique à vontade para usar as mesmas imagens que estou usando no Pacote de Layout de Agência de Viagem. Depois disso, você precisará criar uma nova página, fornecer a página e o título e implantar o Divi Builder para construir no front end. Em seguida, selecione a opção “construir do zero”. É isso. Sua tela de design o aguarda!
Compreendendo como a perspectiva funciona com as opções de transformação
Se você já fez um curso básico de arte, provavelmente está familiarizado com a perspectiva. É uma técnica usada por artistas para desenhar objetos que parecem ser 3D, embora existam em um pedaço de papel ou tela 2D. No web design, você pode posicionar elementos em posições 3D usando a propriedade transform. No Divi, essas opções de transformação são integradas ao construtor Divi. A principal propriedade de transformação que coloca um elemento em uma posição 3D é a rotação de transformação, que permite girar itens ao longo dos eixos z, x ou y. No entanto, se você girar um item usando a rotação de transformação, o elemento não aparecerá como 3D, a menos que a propriedade de perspectiva seja aplicada.
Por exemplo, digamos que você tenha um módulo de imagem única com uma imagem adicionada a uma linha de uma coluna.
Em seguida, você usa a propriedade transform rotate para girar a imagem ao longo do eixo x. A imagem girará, mas permanecerá em 2D, de forma que a imagem simplesmente pareça ter sido comprimida de cima para baixo para ficar mais curta.
Agora, se você adicionar perspectiva usando um pequeno trecho de CSS ao elemento principal do Row (que é um elemento pai da imagem), você adiciona perspectiva à imagem. Dependendo do valor da perspectiva, você pode aumentar ou diminuir a distância que o objeto aparece do usuário olhando para a tela. Aqui está um exemplo de como a imagem ficará se você adicionar “perspectiva: 600px” à Linha.
Você pode ver que a parte superior da imagem é menor e a parte inferior da imagem é maior, criando o efeito de perspectiva 3D. Basicamente, a imagem parece estar a 900px do usuário visualizando a página.
Neste tutorial, usarei a mesma técnica para girar uma linha inteira de imagens e, em seguida, adicionarei perspectiva à seção pai para criar paredes de fotos 3D.
Projetando paredes de fotos 3D superiores e inferiores
Neste primeiro projeto, vamos adicionar uma parede de fotos 3D na parte superior e na parte inferior de um único tipo de texto que pode ser usado como título. Veja como fazer.
Criando o Top 3D Photo Wall
Para iniciar as coisas em sua nova página, crie uma seção regular com uma linha de quatro colunas.
Na coluna 1, adicione um módulo de imagem com sua primeira imagem. Todas as imagens que estou usando neste exemplo têm 600 px por 800 px.
Depois de fazer upload de sua imagem para o módulo de imagem, atualize o preenchimento da seguinte forma:
Preenchimento personalizado: 3% superior, 3% inferior, 3% esquerdo, 3% direito
Duplique (ou copie e cole) a imagem e adicione-as a cada uma das quatro colunas de modo que você tenha três imagens em cada uma das quatro colunas como esta.
Isso servirá como a parede superior (ou teto) que giraremos e adicionaremos perspectiva para criar o design da parede 3D.
Personalize a seção para adicionar perspectiva e ocultar estouro
Como vamos girar o módulo de linha (não imagens individuais), precisamos adicionar a propriedade perspectiva ao pai da linha, que é a seção. E para evitar que as imagens saiam do contêiner da seção, devemos adicionar o estouro oculto tanto ao estouro vertical quanto ao horizontal.
Para fazer isso, abra a configuração da seção e atualize o seguinte:
Cor de fundo: # 000000
Preenchimento personalizado: 0 px superior, 0 px inferior
Para adicionar a propriedade perspectiva, adicione o seguinte CSS personalizado ao elemento principal:
CSS do elemento principal:
perspective: 400px;
Veja as propriedades de estouro da seguinte forma:
Excesso horizontal: oculto
Estouro vertical: oculto 
Atualizar configurações de linha: largura e largura da medianiz
Agora é hora de personalizar a linha para prepará-la para o design 3D girado. Para fazer isso, vamos diminuir a largura e eliminar qualquer margem entre as imagens, atualizando a largura da medianiz.
Abra as configurações de linha e atualize o seguinte:
Largura da calha: 1
Largura: 300 px (desktop, tablet e telefone)
Atualizar configurações de linha: Transformar, girar e originar
Agora use a opção de rotação de transformação para girar a linha da seguinte maneira:
Transformar e girar eixo Y: -58deg
A alteração da origem de transformação da seguinte maneira:
Origem da transformação: centro inferior (ou 100% 50%)
Atualizar configurações de linha: larguras de coluna personalizadas
Como queremos que o layout de quatro colunas permaneça nas telas do tablet e do telefone, precisamos substituir o css para a largura da coluna nesses pontos de interrupção. Para fazer isso, precisamos adicionar uma propriedade de largura css a cada uma das colunas. Na guia avançada, adicione o seguinte snippet CSS personalizado ao elemento principal de cada coluna da seguinte maneira:
(observação: certifique-se de que a largura da calha está definida como 1 ou isso não funcionará)
Elemento principal da coluna 1:
width: 25% !important;
Elemento principal da coluna 2:
width: 25% !important;
Elemento principal da coluna 3:
width: 25% !important;
Elemento principal da coluna 4:
width: 25% !important;
É isso. Nossa primeira parede de fotos 3D foi criada.
Crie a seção de título
Para criar nosso título para o design, precisamos criar uma nova seção regular com uma linha de uma coluna diretamente sob a seção atual.
Antes de adicionar um módulo, atualize a seção com um fundo preto:
Cor de fundo: # 000000
Em seguida, adicione a mesma propriedade perspectiva ao elemento principal da seção como fizemos antes, da seguinte maneira:
Em seguida, adicione um módulo de texto à linha com o seguinte:
Conteúdo: Fotografia
Fonte do texto: Titillium Web
Estilo da fonte do texto: TT
Cor do texto do texto: #ffffff
Tamanho do texto do texto: 5vw
Espaçamento entre letras do texto: 6px
Altura da linha de texto: 1em
Orientação do Texto: Centro
Agora, podemos adicionar uma rotação de transformação ao módulo de texto. Com a perspectiva definida no pai (ou seção), o efeito 3D ocorrerá assim que girarmos o texto.
Adicione os valores de rotação de transformação da seguinte maneira:
Transformar, girar o eixo X: -12deg
Transformar, girar, eixo Y: 32deg
Agora estamos prontos para criar a parede de fotos 3D inferior.
Crie a parede inferior da foto 3D (ou piso)
Para criar a parede de fotos 3D inferior, podemos simplesmente copiar e colar a seção superior que contém a parede superior e colá-la diretamente sob a seção de título.
Em seguida, atualize as configurações de linha da nova seção da seguinte maneira:
Transformar e girar eixo Y: 58deg
Origem da transformação: Centro superior
Design final
É isso! Vamos dar uma olhada no design final.
O design também permanecerá intacto no celular (além de um pequeno estouro).
Criação de paredes de fotos 3D esquerda e direita
Para este próximo projeto, vamos criar paredes de fotos 3D nos lados esquerdo e direito de nosso título, em vez de na parte superior e inferior. Para iniciar o processo de design, usaremos alguns de nossos designs pré-construídos em nosso primeiro exemplo.
Para começar, duplique a seção inferior do primeiro exemplo de design que contém a parede inferior da imagem. Em seguida, abra as configurações de linha da nova seção e redefina as opções de transformação de volta ao estado padrão.
Em seguida, duplique a linha.
Em seguida, copie a Linha (não a seção) que contém o módulo de texto com o título no primeiro exemplo de design. Em seguida, cole-o entre as duas linhas que contêm as imagens.
Esta é uma configuração semelhante ao primeiro design, exceto que todas as nossas linhas estão dentro de uma seção. Isso é importante para a próxima etapa.
Queremos que nossas duas paredes de imagem fiquem à esquerda e à direita da página, com o texto no centro. Uma maneira fácil de fazer isso é usar o display flex em nossa seção. Isso alinhará nossas linhas horizontalmente dentro da seção.
Para fazer isso, abra as configurações da seção e adicione o seguinte CSS personalizado ao elemento principal:
(Observe que estamos aumentando o valor da perspectiva para 700px para criar mais distância de "espaço Z" da perspectiva do usuário.)
CSS do elemento principal:
perspective: 700px; display:flex;
E voila! Nossas paredes estão no lugar e prontas para girar.
Adicione mais imagens para uma parede mais alta
Para deixar nossa parede de fotos 3D um pouco mais alta, tudo o que precisamos fazer é adicionar outra imagem a cada uma de nossas quatro colunas em cada uma das linhas que contêm imagens. Apenas certifique-se de que eles carreguem o preenchimento de 3% como os outros.
Alterando a largura das duas linhas laterais
Antes de girar nossa parede de imagem, primeiro precisamos ajustar sua largura para 100%. Abra as configurações de linha para a parede de imagem no lado esquerdo e atualize o seguinte:
Largura: 100% (desktop, tablet, telefone)
Largura máxima: 100%
Em seguida, faça o mesmo para a linha do lado direito.
Girando as linhas laterais para efeito 3D
Agora estamos prontos para adicionar nossa rotação de transformação a cada uma de nossas linhas. Primeiro, abra as configurações da linha da esquerda e atualize o seguinte:
Transformar, girar o eixo X: 90 graus
Em seguida, abra as configurações de linha para a linha do lado direito e atualize o seguinte:
Transformar, girar o eixo X: -90deg
Com nossa perspectiva posicionada no nível da seção, nossas linhas serão exibidas como paredes de fotos 3D em cada lado do nosso módulo de texto.
Resultado final
Vamos conferir o resultado final.
Para colocar um pouco de cereja no bolo, você pode adicionar uma imagem de fundo com elementos gráficos 3D. Aqui está um exemplo do design com uma imagem de fundo tirada do Pacote de Layout de Criptomoeda.
Efeito bônus de flutuação: coloque essas paredes em exibição ao pairar!
Você pode adicionar facilmente um efeito de foco de rotação de transformação que permitirá ao usuário visualizar a parede da imagem ao colocá-la na vista ao pairar. Para fazer isso, abra as configurações da linha esquerda e atualize o seguinte:
Origem da transformação: centro esquerdo
Transformar, girar o eixo X (pairar): 0deg
Em seguida, nas configurações de linha corretas, atualize o seguinte:
Origem da transformação: centro direito
Transformar, girar o eixo X (pairar): 0deg
Agora verifique o resultado.
Efeito de design bônus: faça imagens irem para o espaço
Uma vez que a linha de imagens está sendo girada com a perspectiva no lugar, você pode mover as imagens dentro de sua linha usando transform translate. O que é legal nisso é que o movimento vai ficar ao longo do plano 3D. Para fazer isso, basta abrir as configurações de uma imagem e usar a opção transformar traduzir para mover a imagem para fora da grade no espaço!
Aqui está um exemplo de como isso ficaria adicionando alguns valores de conversão de transformação a imagens.
Pensamentos finais
A criação de paredes de fotos 3D em Divi realmente causa um impacto impressionante no design de uma página. E devo dizer que é muito divertido experimentar diferentes designs usando as técnicas deste artigo. A propriedade de perspectiva trabalha lado a lado com as opções de transformação para criar inúmeras vidas como designs 3D! E não se esqueça que essas linhas (ou paredes) podem ser preenchidas com qualquer módulo no Divi. Portanto, sinta-se à vontade para experimentar algumas sinopses também. Espero que isso o inspire a criar algo único hoje.
Estou ansioso para ouvir de você nos comentários.
Saúde!