En este laboratorio, crearemos un cubo en rotación 3D utilizando HTML y CSS. El cubo tendrá seis caras de colores únicos y rotará continuamente en el espacio 3D, demostrando el poder de las transformaciones y animaciones 3D de CSS. Este proyecto es una excelente introducción a las capacidades 3D de CSS, lo que le permite visualizar cómo se pueden posicionar y animar elementos en el espacio tridimensional sin necesidad de JavaScript.
Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel intermedio con una tasa de finalización del 59%. Ha recibido una tasa de reseñas positivas del 94% por parte de los estudiantes.
Crear la Estructura HTML
Un cubo 3D consta de seis caras: frontal, posterior, izquierda, derecha, superior e inferior. Necesitamos crear una estructura HTML que nos permita posicionar estas caras en el espacio 3D.
Abriremos el archivo index.html en el directorio de nuestro proyecto y agregaremos el código HTML necesario para crear la estructura del cubo.
Abra el WebIDE navegando al panel del explorador de archivos en el lado izquierdo.
Haga clic en el archivo index.html para abrirlo en el editor.
Copie y pegue el siguiente código HTML en el archivo:
Empezamos con la estructura estándar de un documento HTML5, incluyendo metadatos y el título.
Enlazamos con nuestro archivo CSS (style.css), que crearemos en el siguiente paso.
En el cuerpo, creamos un contenedor div que centrará nuestro cubo en la página.
Dentro del contenedor, tenemos un div con la clase cube que se convertirá en nuestro objeto 3D.
Dentro del cubo, definimos seis div, cada uno con la clase face y una clase adicional que identifica su posición (frontal, posterior, etc.).
Cada cara contiene texto que indica su posición para ayudarnos a identificarlas.
Para ver su progreso actual, busque el botón "Go Live" en la parte inferior del WebIDE y haga clic en él. Esto iniciará un servidor web local y abrirá una pestaña del navegador que mostrará su página. Actualmente, solo verá el texto de cada cara apilado uno encima del otro, ya que aún no hemos aplicado ningún estilo.
En el siguiente paso, usaremos CSS para transformar estos div en las caras de un cubo 3D.
Crear Estilos CSS Básicos
Ahora que tenemos nuestra estructura HTML, necesitamos darle estilo para crear la base de nuestro cubo 3D. En este paso, agregaremos el CSS necesario para crear un contenedor para nuestro cubo y dar estilo a las caras del cubo.
En el WebIDE, haga clic en el archivo style.css en el panel del explorador de archivos para abrirlo.
Copie y pegue el siguiente código CSS en el archivo:
/* 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;
}
Comprendamos el CSS que acabamos de agregar:
Primero, aplicamos un reinicio CSS básico para garantizar un estilo consistente en todos los navegadores, estableciendo márgenes y rellenos en cero.
Estilamos el elemento body para centrar nuestro cubo vertical y horizontalmente en la página utilizando flexbox.
La clase .container incluye la propiedad perspective, que es crucial para los efectos 3D. Piense en ella como la configuración de la distancia a la que se encuentra del cubo. Un valor de 1000px proporciona un efecto 3D moderado.
La clase .cube define las dimensiones de nuestro cubo (200px × 200px) y utiliza transform-style: preserve-3d. Esta propiedad es esencial, ya que le dice al navegador que los elementos hijos deben posicionarse en el espacio 3D en lugar de aplanarse.
La clase .face contiene estilos compartidos por las seis caras:
position: absolute permite que las caras se posicionen en el mismo espacio.
Cada cara tiene las mismas dimensiones que el cubo (200px × 200px).
Utilizamos flexbox para centrar el texto en cada cara.
Agregamos bordes blancos y texto con sombra para una mejor visibilidad.
Ahora, si actualiza la pestaña del navegador "Go Live", debería ver algunos cambios, pero las caras todavía están apiladas una encima de la otra. Esto se debe a que todavía no las hemos posicionado en el espacio 3D. Lo haremos en el siguiente paso.
Posicionar las Caras del Cubo en el Espacio 3D
Ahora necesitamos posicionar cada cara del cubo en el espacio 3D. Para crear un cubo, debemos colocar cada cara a una distancia de la mitad del ancho del cubo (100px) desde el centro, en seis direcciones diferentes.
Utilizaremos transformaciones 3D de CSS para lograr esto:
translateZ() mueve un elemento hacia adelante o hacia atrás a lo largo del eje Z.
rotateX() rota un elemento alrededor del eje X horizontal.
rotateY() rota un elemento alrededor del eje Y vertical.
Agreguemos el CSS para posicionar cada cara:
En el WebIDE, con style.css todavía abierto, agregue el siguiente código CSS al final del archivo:
/* 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 */
}
Comprendamos lo que hace este CSS:
Le damos a cada cara un color de fondo diferente para distinguirlas visualmente.
Para cada cara, aplicamos una transformación específica para posicionarla correctamente:
La cara frontal simplemente se mueve 100px hacia el espectador a lo largo del eje Z.
La cara posterior se rota 180° alrededor del eje Y y se mueve 100px hacia adelante.
La cara derecha se rota 90° en el sentido de las agujas del reloj alrededor del eje Y y se mueve 100px hacia adelante.
La cara izquierda se rota 90° en el sentido contrario a las agujas del reloj alrededor del eje Y y se mueve 100px hacia adelante.
La cara superior se rota 90° hacia arriba alrededor del eje X y se mueve 100px hacia adelante.
La cara inferior se rota 90° hacia abajo alrededor del eje X y se mueve 100px hacia adelante.
Ahora actualice la pestaña del navegador para ver los cambios. Debería poder ver la cara frontal del cubo. Sin embargo, el cubo aún no está rotando, por lo que no puede ver las otras caras. Agregaremos la animación de rotación en el siguiente paso.
Cómo funcionan las transformaciones 3D:
Cuando aplicamos una transformación rotateY(90deg), esencialmente estamos girando el elemento 90 grados alrededor del eje Y (eje vertical), haciéndolo mirar hacia la derecha.
Después de rotar, cuando aplicamos translateZ(100px), estamos moviendo el elemento 100px hacia adelante en la dirección en la que ahora está mirando (que podría ser cualquier dirección dependiendo de las rotaciones previas).
Al combinar estas transformaciones, podemos colocar cada cara en la posición y orientación correctas para formar un cubo.
Agregar Animación para Hacer Girar el Cubo
Nuestro cubo ahora está construido correctamente, pero es estático. Para hacerlo más interesante, agregaremos una animación para que el cubo gire continuamente en el espacio 3D.
Las animaciones CSS nos permiten crear movimiento en las páginas web sin utilizar JavaScript. Definiremos una animación de fotogramas clave (keyframes) y la aplicaremos a nuestro cubo.
En el WebIDE, agregue el siguiente código CSS al final de su archivo 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 */
}
Comprendamos este CSS:
La regla @keyframes define una animación llamada rotate.
Especifica cómo debe verse el elemento en varias etapas de la animación.
Al 0%, el cubo no tiene rotación.
Al 25%, el cubo se ha rotado 90 grados en los ejes X e Y.
Al 50%, el cubo se ha rotado 180 grados en ambos ejes.
Al 75%, el cubo se ha rotado 270 grados en ambos ejes.
Al 100%, el cubo ha completado una rotación completa de 360 grados en ambos ejes.
Actualizamos el selector .cube para aplicar esta animación:
animation: rotate 20s infinite linear aplica la animación rotate.
La animación dura 20 segundos por cada rotación completa.
Se repite infinitamente.
La función de temporización lineal asegura una velocidad de rotación constante.
Ahora actualice la pestaña de su navegador. Debería ver su cubo girando suavemente en el espacio 3D, mostrando las seis caras de colores a medida que gira.
Comprendiendo las animaciones CSS:
Las animaciones CSS constan de dos componentes: un estilo que describe la animación y un conjunto de fotogramas clave (keyframes) que definen los estados de la animación en varios puntos de tiempo.
La propiedad animation es una forma abreviada de varias propiedades de animación:
animation-name: Especifica el nombre de la regla @keyframes.
animation-duration: Especifica cuánto tiempo debe tardar la animación en completar un ciclo.
animation-timing-function: Define cómo progresa la animación a lo largo de un ciclo.
animation-iteration-count: Especifica cuántas veces debe repetirse la animación.
Ahora ha creado con éxito un cubo 3D en rotación utilizando solo HTML y CSS. Este ejemplo demuestra el poder de las transformaciones 3D y las animaciones de CSS para crear elementos web visualmente atractivos sin necesidad de JavaScript.
Intente experimentar con diferentes duraciones de animación, diferentes ejes de rotación o incluso agregando transformaciones adicionales para ver cómo afectan a su cubo.
Resumen
Felicidades por completar el laboratorio del cubo 3D en rotación. En este laboratorio, has:
Creado una estructura HTML con seis caras para un cubo 3D.
Aplicado estilos CSS para posicionar elementos en el espacio 3D.
Utilizado transformaciones 3D de CSS para colocar cada cara correctamente en el espacio 3D.
Agregado animaciones CSS para crear un cubo en rotación continua.
Este proyecto te ha introducido a varios conceptos importantes de CSS:
Transformaciones 3D de CSS (translate, rotate).
La propiedad perspective para efectos 3D.
La propiedad transform-style para preservar la posición 3D.
Animaciones de fotogramas clave (keyframes) de CSS.
Estos conceptos son herramientas poderosas para crear interfaces web atractivas e interactivas sin depender de JavaScript. Puedes aplicar estas técnicas para crear diversos elementos 3D, desde simples tarjetas en rotación hasta complejos modelos 3D.
Como extensión a este proyecto, podrías considerar:
Agregar efectos de hover para pausar la animación cuando el usuario pase el cursor sobre el cubo.
Agregar imágenes o contenido más complejo a cada cara.
Crear diferentes caminos de animación modificando los fotogramas clave (keyframes).
Experimentar con diferentes tamaños, colores y velocidades de rotación.
Recuerda que el CSS moderno es extremadamente poderoso para crear efectos visuales, y muchas animaciones que antes requerían JavaScript ahora se pueden lograr con solo CSS, lo que resulta en un mejor rendimiento y un código más sencillo.
