Dado 3D animado con HTML y CSS

Dado 3D

Dado 3D animado con HTML y CSS

Comenzamos creando un archivo index.html y un archivo style.css en la misma carpeta. En nuestro archivo HTML dentro del <body> definimos un <div> con la clase “contenedor”, dentro de éste otro con la clase “cubo” y dentro seis de ellos cada uno con la clase “cara”. Aquí el código html dentro del body:

<div class="contenedor">
    <div class="cubo">
        <div class="cara"></div>
        <div class="cara"></div>
        <div class="cara"></div>
        <div class="cara"></div>
        <div class="cara"></div>
        <div class="cara"></div>
     </div> 
</div>

Ahora pasamos a modificar los estilos.

Al cuerpo del documento le apliqué un display y también un fondo oscuro aunque con mejor resultado puedes ponerle una imagen pero te aconsejo que le agregues una sombra al cubo, requiere un trabajo extra pero quedaría genial . A “contenedor” le damos una perspectiva de 1000 píxeles, esta propiedad lo que hace es determinar la distancia entre el plano z=0 y el observador además si no se la configuramos nuestro cubo se verá deforme, también le apliqué un margen.

body {
    background-color: black;
    display: flex;
}

.contenedor {
    perspective: 1000px;
    margin: auto;
}

Para posicionar los hijos dentro de “cubo” en el espacio 3D usamos transform-style, le damos un margen y junto con sus hijos le damos igual alto y ancho. Las caras tendrán una posición absoluta y un borde blanco.

.cubo {
    transform-style: preserve-3d;
    margin: 200px auto;
}

.cubo,
.cubo>div {
    height: 290px;
    width: 290px;
}

.cara {
    position: absolute;
    border: 5px solid #ffffff;
}

Ahora vamos a las imágenes de las caras que coloqué en una carpeta, al final del post tendrás el acceso al repositorio en GitHub:

.cubo .cara:nth-child(1) {
    background-image: url("./imagenes/tres.jpg");
}

.cubo .cara:nth-child(2) {
    background-image: url("./imagenes/cinco.jpg");
}

.cubo .cara:nth-child(3) {
    background-image: url("./imagenes/seis.jpg");
}

.cubo .cara:nth-child(4) {
    background-image: url("./imagenes/cuatro.jpg");
}

.cubo .cara:nth-child(5) {
    background-image: url("./imagenes/dos.jpg");
}

.cubo .cara:nth-child(6) {
    background-image: url("./imagenes/uno.jpg");
}

Una vez cargadas las imágenes en cada cara, llevamos por el eje z la cara con el tres hacia el frente y la cara con el cinco hacia el fondo. Sobre el eje y trasladamos en sentidos opuestos a la cara con el seis y el cuatro para luego rotarlos 90 grados y dejarlos enfrentados, y lo mismo con las caras dos y uno pero sobre el eje x.

.cubo .cara:nth-child(1) {
    background-image: url("./imagenes/tres.jpg");
    transform: translateZ(150px);
}

.cubo .cara:nth-child(2) {
    background-image: url("./imagenes/cinco.jpg");
    transform: translateZ(-150px);
}

.cubo .cara:nth-child(3) {
    background-image: url("./imagenes/seis.jpg");
    transform: translateX(-150px) rotateY(90deg);
}

.cubo .cara:nth-child(4) {
    background-image: url("./imagenes/cuatro.jpg");
    transform: translateX(150px) rotateY(90deg);
}

.cubo .cara:nth-child(5) {
    background-image: url("./imagenes/dos.jpg");
    transform: translateY(-150px) rotateX(90deg);
}

.cubo .cara:nth-child(6) {
    background-image: url("./imagenes/uno.jpg");
    transform: translateY(150px) rotateX(90deg);
}

Ahora pasemos a la animación que se la aplicamos a la clase “cubo” que contiene nuestras caras ya posicionadas, le damos unos 20 segundos de duración, la llamamos “giro”, se la dejamos de forma infinita y le aplicamos una velocidad lineal de inicio a fin. Para el @keyframes definimos de esta manera las transformaciones:

.cubo {
    animation: giro 20s infinite linear;
}

@keyframes giro {
    0% {
        transform: rotateX(-45deg) rotateY(0deg)
    }
    20% {
        transform: rotateX(0deg) rotateY(00deg)
    }
    40% {
        transform: rotateX(45deg) rotateY(180deg)
    }
    80% {
        transform: rotateX(-90deg) rotateY(360deg)
    }
    100% {
        transform: rotateX(-45deg) rotateY(720deg)
    }
}

Video en Youtube

VER DEMO Código en GitHub
Paola Puchetta Alves
Paola Puchetta Alves

Soy desarrolladora web y programadora de software. Tengo experiencia desarrollando páginas y aplicaciones web. Uno de mis primeros programas que involucraba base de datos (MySQL) fue con Python y Tkinter. He sido colaboradora en la realización de una aplicación en Android. Me gusta bailar, amo a los gatos y soy bastante introvertida.

Deja tu mensaje