https://github.com/gabsouza-dev/3d-cube
https://github.com/gabsouza-dev/3d-cube
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/gabsouza-dev/3d-cube
- Owner: gabsouza-dev
- License: mit
- Created: 2025-03-10T15:19:21.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-10T15:26:52.000Z (over 1 year ago)
- Last Synced: 2025-04-14T03:09:40.993Z (about 1 year ago)
- Language: CSS
- Homepage: https://3d-cube-beta.vercel.app
- Size: 6.84 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Cubo 3D
Este projeto cria um cubo 3D interativo usando HTML, CSS e JavaScript. O cubo gira de acordo com o movimento do mouse do usuário, proporcionando uma experiência visual interativa.
## Tecnologias Utilizadas
- **HTML**: Estruturação da página e definição das faces do cubo.
- **CSS**: Estilização do cubo e a criação da perspectiva 3D.
- **JavaScript**: Manipulação do evento de movimento do mouse para rotacionar o cubo em tempo real.
## Como Funciona
O código cria uma cena 3D onde um cubo é colocado no centro da tela. O cubo é composto por seis faces (frente, trás, esquerda, direita, cima e baixo), e cada face é rotacionada utilizando transformações CSS para criar o efeito 3D.
Quando o usuário move o mouse pela tela, o evento `mousemove` é capturado e as coordenadas do mouse são usadas para calcular a rotação do cubo ao redor dos eixos X e Y.
## Como Usar
1. **Abra o arquivo em um navegador**: Basta salvar o código HTML fornecido em um arquivo `.html` e abri-lo em qualquer navegador moderno (Chrome, Firefox, etc.).
2. **Interaja com o cubo**: Mova o mouse pela tela para rotacionar o cubo em todas as direções. O cubo girará conforme o movimento do mouse.
## Estrutura do Código
- **HTML**:
- A estrutura principal está dentro de uma `
`, que define o ambiente 3D.
- O cubo é uma ``, com 6 faces (`.front`, `.back`, `.left`, `.right`, `.top`, `.bottom`), representando as faces do cubo.
- **CSS**:
- A propriedade `perspective` é usada para criar a sensação de profundidade na cena 3D.
- Cada face do cubo é posicionada usando a propriedade `transform`, aplicando rotações e translações para posicioná-las corretamente em relação ao centro.
- **JavaScript**:
- Um event listener é adicionado ao evento `mousemove` para capturar a posição do mouse e ajustar a rotação do cubo com base nas coordenadas do cursor.
## Exemplo de Implementação
```html
Cubo 3D Interativo
A
B
C
D
E
F
```
## Melhorias Possíveis
- **Efeitos adicionais**: Adicionar animações ou efeitos de iluminação para tornar o cubo ainda mais interativo.
- **Responsividade**: Ajustar a escala do cubo dependendo do tamanho da tela ou dispositivo para uma melhor experiência de usuário.
- **Controles adicionais**: Adicionar controles para permitir ao usuário girar o cubo de outras formas, como botões de rotação ou teclas de atalho.
## Licença
Este projeto é de código aberto. Sinta-se à vontade para modificar e personalizar conforme necessário.