/3D-Card-Hover-Effect

Efeito 3D no cartão usando JavaScript

Primary LanguageCSSMIT LicenseMIT

3D Card Hover Effect

Efeito 3D no cartão usando JavaScript

Essa semana me desafiei desenvolver uma página simples com efeito 3D. O resultado pode ser conferido neste link: aqui.

No HTML:

  • utilizei a metodologia BEM para manter as classes organizadas;
  • trabalhei a questão da semântica.

No CSS:

  • usei o Sass como pré-processador. Descobri que BEM e Sass formam uma grande dupla;
  • realizei pequenas animações com keyframe;
  • responsividade? Temos!

No JavaScript:

  • manipulei o DOM.
  • No efeito 3D aprendi a usar algumas propriedades como innerHeight, innerWidth, pageY, pageX. De quebra, descobri que para mobile, é preciso usar o touch events

O layout foi todo desenvolvido no Figma.

Preview da página