Efeito 3D Interativo com CSS

Efeito 3D Interativo com CSS: Neste artigo, vamos analisar e explicar um trecho de código HTML e CSS que cria um efeito visualmente atraente e interativo usando transformações 3D. Este código é perfeito para adicionar um toque de sofisticação a elementos HTML em seu site. Vamos desvendar como funciona passo a passo.

Introdução

O código em questão cria uma representação visual de um elemento “cartão” dentro de um contêiner “pai”. Quando o usuário passa o mouse sobre o cartão, ocorrem transformações 3D e sombras sutis, criando um efeito de “levantar” o cartão da página.

Código HTML:

<div class="parent">
    <div class="card">
        <div class="tony">
            <span class="mark mark1"><img src="img/01.png"></span>
            <span class="mark mark2"><img src="img/02.png"></span>
            <span class="mark mark3"><img src="img/03.png"></span>
        </div>
    </div>
</div>

<div class="parent">: Este é um elemento <div> com a classe CSS “parent”. Ele atua como um contêiner principal ou um elemento pai que envolve todo o conteúdo relacionado a ele. É comum usar classes para estilizar ou selecionar elementos em CSS ou para aplicar lógica em JavaScript.

<div class="card">: Dentro do elemento com a classe “parent”, há outro elemento <div> com a classe “card”. Este elemento provavelmente representa um cartão ou um contêiner de conteúdo específico. Mais uma vez, a classe CSS é usada para identificar e estilizar este elemento de forma única.

<div class="tony">: Dentro do elemento com a classe “card”, há um terceiro elemento <div> com a classe “tony”. Esse elemento também é um contêiner, e a classe CSS “tony” pode ser usada para estilizar ou selecionar esse contêiner específico.

<span class="mark mark1"><img src="img/01.png"></span>: Dentro do elemento com a classe “tony”, existem três elementos <span> com classes “mark mark1”, “mark mark2” e “mark mark3”. Esses <span> provavelmente são usados para posicionar e estilizar conteúdo, e eles contêm elementos <img> que representam imagens. Cada imagem está definida com um atributo src que especifica o caminho para a imagem.

Entendendo o CSS

Estilos globais

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: rgb(37, 36, 36);
}

Essa parte do código define estilos globais para a página. O seletor * define margem e preenchimento zero para todos os elementos, e o box-sizing é configurado como border-box. A estilização para o corpo (body) garante que ele seja centralizado na tela e que o fundo seja de cor cinza escuro.

Definição da classe pai

.parent {
    width: 350px;
    height: 350px;
    perspective: 4000px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.parent

• Define o contêiner pai que envolve todo o cartão.
• Estabelece uma perspectiva de 4000px, o que permite a aplicação de transformações 3D.
• Utiliza flexbox para centralizar os elementos filhos verticalmente e horizontalmente.

Cartão

.card {
    width: 100%;
    height: 100%;
    border-radius: 50px 50px 0 0;
    background: linear-gradient(135deg, 
    rgb(104 104 104) 0%, rgb(0 0 0) 100%);
    transition: all 0.5s ease-in-out;
    transform-style: preserve-3d;
    box-shadow: rgba(139, 9, 9, 0) 
    40px 50px 25px -40px, 
    rgba(71, 15, 5, 0.2) 0px 25px 25px -5px;
}

. .card

• Representa o cartão em si.
• Define propriedades de estilo, como borda arredondada, plano de fundo gradiente e sombras.
• Usa transform-style: preserve-3d para manter as transformações 3D dos elementos filhos.

Tony

  .tony {
    display: contents;
    position: absolute;
    right: 0;
    top: 0;
    transform-style: preserve-3d;
  }

.tony

• Envolve os elementos .mark que representam as marcas no cartão.
• Define display: contents para fazer com que os elementos filhos diretos se comportem como se estivessem diretamente dentro do .parent.
• Aplica position: absolute para controlar a posição dos elementos filhos dentro do .card.

.tony .mark {
    display: block;
    position: relative;
    aspect-ratio: 1;
    top: 0;
    right: 0;
    transition: all 0.5s ease-in-out;
  }

  .mark img{
    width: 100%;
    height: auto;
  }

.mark e .mark img

• .mark são as marcas no cartão.
• As imagens dentro das marcas são dimensionadas para preencher todo o espaço disponível.
• As marcas têm aspect-ratio: 1 para manter uma proporção quadrada.
• transform é aplicado às marcas para criar diferentes níveis de profundidade 3D quando o cartão é destacado.

 .tony .mark1 {
    width: 100%;
    transform: translate3d(0, 0, 20px);
    transition-delay: 0.8s;
  }

  .tony .mark2 {
    width: 100%;
    transform: translate3d(0, 0, 40px);
    top: -365px;
    transition-delay: 0.6s;
  }

  .tony .mark3 {
    width: 100%;
    transform: translate3d(0, 0, 60px);
    top: -726px;
    right: 2px;
    transition-delay: 0.5s;
  }

.tony .mark1 { ... }:

• .tony .mark1 seletor especifica que essa regra se aplica a elementos com a classe “mark1” que estão dentro de elementos com a classe “tony”.
• width: 100%; define a largura do elemento com a classe “mark1” como 100% do seu contêiner pai, fazendo com que ele ocupe todo o espaço horizontal disponível.
• transform: translate3d(0, 0, 20px); aplica uma transformação 3D ao elemento com a classe “mark1”. Ele move o elemento 20 pixels para frente no eixo Z, criando um efeito de profundidade tridimensional.
• transition-delay: 0.8s; define um atraso de transição de 0,8 segundos para essa transformação. Isso significa que a transformação levará 0,8 segundos para começar a ocorrer após o acionamento (por exemplo, quando o mouse passar sobre o elemento).

.tony .mark2 { ... }:

• .tony .mark2 seletor especifica que essa regra se aplica a elementos com a classe “mark2” que estão dentro de elementos com a classe “tony”.
• width: 100%; define a largura do elemento com a classe “mark2” como 100% do seu contêiner pai, assim como no caso anterior.
• transform: translate3d(0, 0, 40px); aplica uma transformação 3D ao elemento com a classe “mark2”. Ele move o elemento 40 pixels para frente no eixo Z, criando um efeito de profundidade mais acentuado do que o elemento “mark1”.
• top: -365px; posiciona o elemento 365 pixels acima da sua posição original. Isso faz com que o elemento pareça estar “flutuando” acima do seu contêiner pai.
• transition-delay: 0.6s; define um atraso de transição de 0,6 segundos para essa transformação.

.tony .mark3 { ... }:

• .tony .mark3 seletor especifica que essa regra se aplica a elementos com a classe “mark3” que estão dentro de elementos com a classe “tony”.
• width: 100%; define a largura do elemento com a classe “mark3” como 100% do seu contêiner pai, da mesma forma que os elementos anteriores.
• transform: translate3d(0, 0, 60px); aplica uma transformação 3D ao elemento com a classe “mark3”. Ele move o elemento 60 pixels para frente no eixo Z, criando o efeito de profundidade mais pronunciado entre os três elementos.
• top: -726px; posiciona o elemento 726 pixels acima da sua posição original, fazendo com que ele pareça estar ainda mais acima do contêiner pai.
• right: 2px; move o elemento 2 pixels para a direita em relação à sua posição original.
• transition-delay: 0.5s; define um atraso de transição de 0,5 segundos para essa transformação.

Efeito Hover

 .parent:hover .card {
    transform: rotate3d(1, 1, 0, 60deg);
    box-shadow: rgba(0, 0, 0, 0.3) 
    30px 50px 25px -40px, rgba(0, 0, 0, 0.1)
     0px 25px 30px 0px;
  }

  .parent:hover .card .tony .mark2 {
    transform: translate3d(0, 0, 100px);
  }

  .parent:hover .card .tony .mark3 {
    transform: translate3d(0, 0, 180px);
  }

.parent:hover .card { ... }:

• .parent:hover especifica que essa regra se aplica quando o elemento com a classe “parent” está em um estado de “hover”.
• .card especifica que a regra se aplica aos elementos com a classe “card” que são filhos do elemento com a classe “parent” em estado de “hover”.
• transform: rotate3d(1, 1, 0, 60deg); aplica uma transformação 3D de rotação ao elemento com a classe “card”. O efeito de rotação ocorre em torno do eixo (1, 1, 0) com um ângulo de 60 graus. Isso cria uma rotação tridimensional quando o elemento “parent” está em hover.
• box-shadow: ... define uma sombra ao redor do elemento “card” quando ele está em hover. A sombra é criada usando a propriedade box-shadow e consiste em duas partes separadas por uma vírgula:
  • A primeira parte, rgba(0, 0, 0, 0.3) 30px 50px 25px -40px, especifica uma sombra mais escura com um deslocamento de 30 pixels na horizontal e 50 pixels na vertical, com um raio de desfoque de 25 pixels e um deslocamento negativo de -40 pixels. Isso cria uma sombra mais pronunciada em um lado do elemento.
  • A segunda parte, rgba(0, 0, 0, 0.1) 0px 25px 30px 0px, especifica uma segunda sombra mais leve com um deslocamento de 0 pixels na horizontal, 25 pixels na vertical, um raio de desfoque de 30 pixels e nenhum deslocamento negativo. Isso cria uma sombra mais suave em outro lado do elemento.

.parent:hover .card .tony .mark2 { ... }:

• .parent:hover continua a especificar que essa regra se aplica quando o elemento com a classe “parent” está em um estado de “hover”.
• .card .tony .mark2 especifica que a regra se aplica aos elementos com a classe “mark2” que estão dentro de elementos com as classes “tony” e “card” em estado de “hover”.
• transform: translate3d(0, 0, 100px); aplica uma transformação 3D de translação ao elemento com a classe “mark2”. Isso move o elemento 100 pixels para frente ao longo do eixo Z quando o elemento “parent” está em hover. Isso cria a ilusão de que o elemento “mark2” está se movendo para frente em relação ao plano do cartão.

.parent:hover .card .tony .mark3 { ... }:

• Similar à regra anterior, esta regra se aplica quando o elemento com a classe “parent” está em um estado de “hover” e especifica que a regra se aplica aos elementos com a classe “mark3” que estão dentro de elementos com as classes “tony” e “card” em estado de “hover”.
• transform: translate3d(0, 0, 180px); aplica uma transformação 3D de translação ao elemento com a classe “mark3”. Ele move o elemento 180 pixels para frente ao longo do eixo Z quando o elemento “parent” está em hover. Isso cria a ilusão de que o elemento “mark3” está se movendo para frente em relação ao plano do cartão, mas em uma profundidade maior do que o “mark2”.

Conclusão

Este código HTML e CSS cria um efeito 3D impressionante e interativo em um cartão dentro de um contêiner pai. As transformações 3D, sombras e transições de estilo proporcionam uma experiência visual envolvente quando o usuário interage com o cartão. Você pode personalizar esse código para se adequar ao design do seu site e criar elementos interativos e atraentes para seus visitantes. É um exemplo fascinante de como o CSS pode ser usado para adicionar profundidade e interatividade aos elementos da web.

Muito obrigado por dedicar seu tempo para ler nosso artigo! Esperamos que você tenha achado o conteúdo útil e informativo.

Se você gostou do que leu e deseja continuar recebendo informações e atualizações incríveis, ficaríamos muito felizes se você pudesse fazer o seguinte:

1. Comente: Deixe seu feedback ou perguntas nos comentários abaixo. Adoraríamos ouvir sua opinião e responder a todas as suas dúvidas.
2. Compartilhe: Se achou este artigo interessante e valioso, compartilhe-o com seus amigos, colegas ou em suas redes sociais. Isso nos ajuda a alcançar mais pessoas.
3. Inscreva-se no nosso Canal no YouTube: Se você ainda não o fez, inscreva-se no nosso canal no YouTube para ter acesso a vídeos educativos e conteúdo exclusivo.
4. Siga-nos no Instagram: Para atualizações regulares, dicas e notícias, siga-nos no Instagram e faça parte da nossa comunidade.
5. Curta nossa Fanpage no Facebook: Não deixe de curtir nossa fanpage no Facebook para acompanhar nossas postagens e interagir com outros entusiastas.

Seu apoio é fundamental para o nosso crescimento e sucesso contínuo. Esperamos continuar trazendo conteúdo valioso para você no futuro.

Muito obrigado por fazer parte da nossa jornada!

Populares

Mais Acessados

Efeito 3D Interativo com CSS

Criando um Card Interativo com HTML e CSS

Animação de Borda usando CSS