Mizu-Ways - Flip Card 3D

O Mizu-Ways é um exercício prático focado no domínio de CSS 3D e interatividade, cujo objetivo é criar uma interface imersiva usando profundidade e perspectiva.

A escolha do tema foi inspirada na série Blue Eye Samurai: o projeto utiliza o conceito dos caminhos da cultura japonesa abordados na obra para as cartas, e o nome faz referência à protagonista, Mizu.

📍 Live Demo

Veja o projeto no seu navegador:

🔗 Click to View

Tecnologias Utilizadas

• HTML5: Estrutura semântica.

• CSS3 Avançado: Propriedades 3D como (perspective, transform), animações (keyframes), seletor :has() e Media Queries.

🎴 Funcionalidades Principais

• Cards 3D (Efeito Pop-out): Rotação fluida com preserve-3d e translateZ, fazendo o personagem "saltar" da carta no hover.

• Letreiros Laterais (Desktop): O hover abre um container de texto explicativo usando transform-origin para um efeito orgânico.

• Foco Dinâmico com :has(): Quando um card recebe hover, os outros ficam opacos e desfocados automaticamente, limpando o visual.

• Background Adaptativo: Vídeo em loop com máscara de cor no desktop; substituído por imagem temática estática no mobile/tablet para evitar bordas e manter a performance.

• Adaptação Mobile: Em telas menores, os letreiros dão lugar a um botão "View More" que direciona para páginas internas detalhadas.

Desafios e Aprendizados

• Manipulação 3D: Ajuste fino de rotateX/Y e translateZ para evitar colisões visuais nas animações.

• Responsividade Avançada: Reposicionamento de elementos absolutos para manter o layout alinhado em qualquer resolução.

• Performance: Uso equilibrado de filtros (blur, grayscale) e keyframes para garantir navegação fluida.

Layout Preview

PC

---

Mobile