Neste laboratório, criaremos um cubo rotativo 3D usando HTML e CSS. O cubo apresentará seis faces com cores únicas e rotacionará continuamente no espaço 3D, demonstrando o poder das transformações e animações 3D do CSS. Este projeto serve como uma excelente introdução às capacidades 3D do CSS, permitindo que você visualize como os elementos podem ser posicionados e animados em um espaço tridimensional sem exigir JavaScript.
Um cubo 3D consiste em seis faces: frente, trás, esquerda, direita, topo e fundo. Precisamos criar uma estrutura HTML que nos permita posicionar essas faces no espaço 3D.
Vamos abrir o arquivo index.html em nosso diretório do projeto e adicionar o código HTML necessário para criar a estrutura do cubo.
index.html para abri-lo no editor.<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3D Rotating Cube</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="cube">
<div class="face front">Front</div>
<div class="face back">Back</div>
<div class="face right">Right</div>
<div class="face left">Left</div>
<div class="face top">Top</div>
<div class="face bottom">Bottom</div>
</div>
</div>
</body>
</html>Vamos entender esta estrutura HTML:
style.css), que criaremos no próximo passo.div container que centralizará nosso cubo na página.div cube que se tornará nosso objeto 3D.face e uma classe adicional identificando sua posição (frente, trás, etc.).
Para ver seu progresso atual, procure o botão "Go Live" na parte inferior do WebIDE e clique nele. Isso iniciará um servidor web local e abrirá uma aba do navegador exibindo sua página. Atualmente, você só verá o texto de cada face empilhado um sobre o outro, pois ainda não aplicamos nenhum estilo.
No próximo passo, usaremos CSS para transformar essas divs nas faces de um cubo 3D.
Agora que temos nossa estrutura HTML, precisamos estilizá-la para criar a base para nosso cubo 3D. Nesta etapa, adicionaremos o CSS necessário para criar um container para nosso cubo e estilizar as faces do cubo.
style.css no painel do explorador de arquivos para abri-lo./* Basic reset and page styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Container styling with perspective */
.container {
perspective: 1000px;
/* The perspective property defines how far the object is from the viewer */
/* A smaller value creates a more intense 3D effect */
}
/* Cube container styles */
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
/* This tells the browser that child elements should be positioned in 3D space */
}
/* Common styles for all faces */
.face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid white;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
color: white;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
opacity: 0.9;
}Vamos entender o CSS que acabamos de adicionar:
body para centralizar nosso cubo verticalmente e horizontalmente na página usando flexbox..container inclui a propriedade perspective, que é crucial para efeitos 3D. Pense nisso como definir a distância que você está do cubo. Um valor de 1000px fornece um efeito 3D moderado..cube define as dimensões do nosso cubo (200px × 200px) e usa transform-style: preserve-3d. Esta propriedade é essencial, pois informa ao navegador que os elementos filhos devem ser posicionados no espaço 3D em vez de achatados..face contém estilos compartilhados por todas as seis faces:
position: absolute permite que as faces sejam posicionadas no mesmo espaçoAgora, se você atualizar sua aba do navegador "Go Live", deverá ver algumas mudanças, mas as faces ainda estão empilhadas umas sobre as outras. Isso ocorre porque ainda não as posicionamos no espaço 3D. Faremos isso na próxima etapa.
Agora precisamos posicionar cada face do cubo no espaço 3D. Para criar um cubo, precisamos colocar cada face a uma distância de metade da largura do cubo (100px) do centro, em seis direções diferentes.
Usaremos transformações 3D do CSS para conseguir isso:
translateZ() move um elemento para frente ou para trás ao longo do eixo ZrotateX() rotaciona um elemento em torno do eixo X horizontalrotateY() rotaciona um elemento em torno do eixo Y verticalVamos adicionar o CSS para posicionar cada face:
style.css ainda aberto, adicione o seguinte código CSS ao final do arquivo:/* Position each face of the cube */
.front {
background-color: #ff8a65; /* Coral */
transform: translateZ(100px);
/* Moves the front face 100px towards the viewer */
}
.back {
background-color: #4fc3f7; /* Light Blue */
transform: rotateY(180deg) translateZ(100px);
/* Rotates 180° around Y-axis and moves 100px forward */
}
.right {
background-color: #81c784; /* Light Green */
transform: rotateY(90deg) translateZ(100px);
/* Rotates 90° right around Y-axis and moves 100px forward */
}
.left {
background-color: #9575cd; /* Purple */
transform: rotateY(-90deg) translateZ(100px);
/* Rotates 90° left around Y-axis and moves 100px forward */
}
.top {
background-color: #ffb74d; /* Orange */
transform: rotateX(90deg) translateZ(100px);
/* Rotates 90° upward around X-axis and moves 100px forward */
}
.bottom {
background-color: #f06292; /* Pink */
transform: rotateX(-90deg) translateZ(100px);
/* Rotates 90° downward around X-axis and moves 100px forward */
}Vamos entender o que este CSS faz:
Agora, atualize a aba do seu navegador para ver as mudanças. Você deve ser capaz de ver a face frontal do cubo. No entanto, o cubo ainda não está rotacionando, então você não pode ver as outras faces. Adicionaremos a animação de rotação na próxima etapa.
Como as Transformações 3D Funcionam:
rotateY(90deg), estamos essencialmente girando o elemento 90 graus em torno do eixo Y (eixo vertical), fazendo com que ele fique voltado para a direita.translateZ(100px), estamos movendo o elemento 100px para frente na direção em que ele está agora voltado (que pode ser qualquer direção, dependendo das rotações anteriores).
Nosso cubo agora está construído corretamente, mas está estático. Para torná-lo mais interessante, adicionaremos uma animação para fazer o cubo rotacionar continuamente no espaço 3D.
As animações CSS nos permitem criar movimento em páginas da web sem usar JavaScript. Definiremos uma animação de keyframe e a aplicaremos ao nosso cubo.
style.css:/* Define the rotation animation */
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
25% {
transform: rotateX(90deg) rotateY(90deg);
}
50% {
transform: rotateX(180deg) rotateY(180deg);
}
75% {
transform: rotateX(270deg) rotateY(270deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
/* Apply the animation to the cube */
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
animation: rotate 20s infinite linear;
/* 20s defines the duration of one complete rotation */
/* infinite means the animation will repeat forever */
/* linear means the animation speed is constant */
}Vamos entender este CSS:
A regra @keyframes define uma animação chamada rotate.
Atualizamos o seletor .cube para aplicar esta animação:
animation: rotate 20s infinite linear aplica a animação rotate.Agora, atualize a aba do seu navegador. Você deve ver seu cubo rotacionando suavemente no espaço 3D, mostrando todas as seis faces coloridas enquanto ele gira.
Entendendo as Animações CSS:
animation é uma abreviação para várias propriedades de animação:
animation-name: Especifica o nome da regra @keyframesanimation-duration: Especifica quanto tempo a animação deve levar para completar um cicloanimation-timing-function: Define como a animação progride através de um cicloanimation-iteration-count: Especifica quantas vezes a animação deve se repetirVocê criou com sucesso um cubo 3D rotativo usando apenas HTML e CSS. Este exemplo demonstra o poder das transformações e animações 3D do CSS para criar elementos web visualmente envolventes sem exigir JavaScript.
Experimente com diferentes durações de animação, diferentes eixos de rotação ou até mesmo adicionando transformações adicionais para ver como elas afetam seu cubo.
Parabéns por concluir o laboratório do Cubo Rotativo 3D. Neste laboratório, você:
Este projeto apresentou a você vários conceitos importantes do CSS:
perspective para efeitos 3Dtransform-style para preservar o posicionamento 3DEsses conceitos são ferramentas poderosas para criar interfaces web envolventes e interativas sem depender de JavaScript. Você pode aplicar essas técnicas para criar vários elementos 3D, desde cartões rotativos simples até modelos 3D complexos.
Como uma extensão deste projeto, você pode considerar:
Lembre-se de que o CSS moderno é extremamente poderoso para criar efeitos visuais, e muitas animações que antes exigiam JavaScript agora podem ser realizadas apenas com CSS, resultando em melhor desempenho e código mais simples.
