Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Desafio: Adicionar Tradução e Distorção | Transformations
Advanced CSS Techniques

Desafio: Adicionar Tradução e DistorçãoDesafio: Adicionar Tradução e Distorção

Tarefa

Crie um cartão de informações interativo sobre animais. Siga estes passos para adicionar efeitos dinâmicos ao passar o mouse:

  1. Aplique uma perspectiva de 400px ao elemento pai, um div com o nome da classe container.
  2. Utilize a função translateZ() para aproximar o cartão (div com o nome da classe card) ao usuário em 50px.
  3. Introduza uma inclinação ao longo do eixo x de 10deg na descrição do cartão (div com o nome da classe card-description-wrapper).
html

index.html

css

index.css

js

index.js

  1. Para o contêiner pai (div com a classe container), defina a propriedade perspective com o valor de 400px para criar um espaço 3D para as transformações do cartão.
  2. Para aproximar o cartão (div com a classe card) do usuário, utilize a função translateZ() com um valor de 50px. Isso simulará o movimento do cartão para frente no espaço 3D.
  3. Aplique um efeito de inclinação ao longo do eixo x na descrição do cartão (div com a classe card-description-wrapper) utilizando a propriedade transform com a função skewX() e um valor de 10deg.
html

index.html

css

index.css

js

index.js

Tudo estava claro?

Seção 5. Capítulo 8
course content

Conteúdo do Curso

Advanced CSS Techniques

1. Introdução

Visão Geral do CursoFoco do CursoTemas do CursoComo Ter Sucesso

2. Posicionamento do Item

O que é Posicionamento?Posicionamento RelativoDesafio: Posicionamento RelativoPosicionamento AbsolutoDesafio: Posicionamento AbsolutoPosicionamento FixoDesafio: Posicionamento FixoPosicionamento FixoDesafio: Posicionamento FixoOrdem de EmpilhamentoDesafio: Ordem de EmpilhamentoOverflow de Conteúdo

3. Transições

O que é Transição?Selecione a Propriedade de TransiçãoDuração da TransiçãoFunção de Tempo de TransiçãoAtraso no Tempo de TransiçãoCombinação de TransiçãoDesafio: Adicionar Transição

4. Animações

O que é Animação?Especificar o Tempo da AnimaçãoControle a Quantidade e Direção da AnimaçãoGerenciar Estado de AnimaçãoComposição de AnimaçãoDesafio: Adicionar Animação

5. Transformações

O que é Transformação?EscalaGirandoDesafio: Adicionar Escalonamento e RotaçãoTraduzirDistorcendo PerspectivaDesafio: Adicionar Tradução e Distorção

6. Sites e aplicativos adaptativos/responsivos

O que é Design Adaptativo/Responsivo?@media QueryAdaptativo - Layouts responsivosInspeccionando a Página da WebDesafio: Inspecionar Layout Adaptativo/Responsivo

7. Pré-processadores

O que é Pré-processador?Sintaxe SassVariáveis SassOperadores Numéricos do SassAninhamento em SassDiretiva @extendEstrutura de Pastas-Arquivos

Advanced CSS Techniques

Desafio: Adicionar Tradução e DistorçãoDesafio: Adicionar Tradução e Distorção

Tarefa

Crie um cartão de informações interativo sobre animais. Siga estes passos para adicionar efeitos dinâmicos ao passar o mouse:

  1. Aplique uma perspectiva de 400px ao elemento pai, um div com o nome da classe container.
  2. Utilize a função translateZ() para aproximar o cartão (div com o nome da classe card) ao usuário em 50px.
  3. Introduza uma inclinação ao longo do eixo x de 10deg na descrição do cartão (div com o nome da classe card-description-wrapper).
html

index.html

css

index.css

js

index.js

  1. Para o contêiner pai (div com a classe container), defina a propriedade perspective com o valor de 400px para criar um espaço 3D para as transformações do cartão.
  2. Para aproximar o cartão (div com a classe card) do usuário, utilize a função translateZ() com um valor de 50px. Isso simulará o movimento do cartão para frente no espaço 3D.
  3. Aplique um efeito de inclinação ao longo do eixo x na descrição do cartão (div com a classe card-description-wrapper) utilizando a propriedade transform com a função skewX() e um valor de 10deg.
html

index.html

css

index.css

js

index.js

Tudo estava claro?

Seção 5. Capítulo 8
some-alt