Clicky

Crear un cubo CSS

Categoría: Internet (Tutoriales y trucos)
Visitas: 10275

Los cubos en CSS han estado olvidados por un tiempo, espero que este artículo simplifique tu diseño

cubo CSSLos cubos hechos con CSS muestran realmente en lo que se ha convertido el CSS en los últimos años, evolucionando de colores simples y directivas de dimensión a un lenguaje capaz de crear complejas visualizaciones creativas. Si le agregas animación, tienes algo realmente bueno. Desafortunadamente cada tutorial que he leído sobre cubos en CSS son un poco largos y una mezclan el estilo visual con los conceptos básicos del cubo, por lo que he decidido escribir un post, dice David Walsh el autor del tutorial, que proporciona sólo los detalles básicos necesarios para crear un cubo CSS.

Ver demo cubo CSS

El ejemplo se basa en una excelente demostración de codependencia por Mircea Georgescu.

El HTML

El elemento cubo, una envoltura en sí misma, tendrá un contenedor propio:

<div>
    <div>
        <div>front</div>
        <div>back</div>
        <div>top</div>
        <div>bottom</div>
        <div>left</div>
        <div>right</div>
    </div>
</div>

Cada cara del cubo tendrá su propio elemento. Como se puede imaginar, habrá que trabajar con el CSS para ponerlas en la posición correcta.

El CSS

Vamos ha coger uno a uno lo más significativo. El primer elemento significativo es todo el envoltorio de animación, que proporcionará una perspectiva de CSS para el elemento 3D:

.wrap {
    perspective: 800px;
    perspective-origin: 50% 100px;
}

La perspectiva CSS es un concepto difícil de explicar, pero MDN hace un gran trabajo, así que voy a duplicar su explicación. Para entender mejor la perspectiva, recomiendo la modificación de la propiedad perspective para ver cómo afecta a la demo. El siguiente es el contenedor de cubos que mantendrá la totalidad de las diferentes caras del cubo:

.cube {
    position: relative;
    width: 200px;
    transform-style: preserve-3d;
}

El cubo será de 200 píxeles de ancho, con posicionamiento relativo de modo que las caras con posición absoluta se mantendrán dentro de los límites. También utilizaremos preservar-3d para mantener el elemento 3D y el plano. Antes de llegar a cualquiera de las reglas específicas de la cara, habrá algunos estilos generales que se aplicarán a cada cara:

.cube div {
    position: absolute;
    width: 200px;
    height: 200px;
}

Con la posición y las dimensiones del conjunto de caras, podemos llegar a crear el código de transformación para las caras individuales:

.back {
    transform: translateZ(-100px) rotateY(180deg);
}
.right {
    transform: rotateY(-270deg) translateX(100px);
    transform-origin: top right;
}
.left {
    transform: rotateY(270deg) translateX(-100px);
    transform-origin: center left;
}
.top {
    transform: rotateX(-90deg) translateY(-100px);
    transform-origin: top center;
}
.bottom {
    transform: rotateX(90deg) translateY(100px);
    transform-origin: bottom center;
}
.front {
    transform: translateZ(100px);
}

Los valores rotateY rotan las caras moviendo la cara para que muestra el texto en el ángulo correcto, mientras que el ajuste de los elementos translateZ las mueve hacia adelante y hacia atrás dentro de la pila. El ajuste TranslateY puede ser confuso, pero ten en cuenta que representa subir o bajar una cara para mostrar el efecto 3D a través de los cristales transparentes. Cada cara tiene su propia configuración de translación para colocarla en el lugar adecuado, por lo que no dudes en modificar estos valores para ver por qué cada uno corresponde a su cara.

Rotaciones horizontales del cubo

Por supuesto, lo bueno es un elemento 3D creado sin establecer animación. La respuesta es: No. No es bueno en todo. Así que aquí están algunas medidas que debemos tomar para hacer que nuestro precioso cubo se anime horizontalmente:

@keyframes spin {
    from { transform: rotateY(0); }
    to { transform: rotateY(360deg); }
}
.cube {
    animation: spin 5s infinite linear;
}

Probablemente más fácil de lo que crees, ¿verdad? El texto es correcto debido a que la rotación la hemos implementado originalmente, y se ha usado animación de fotogramas clave en el caso de que queramos añadir más cosas en el futuro.

Rotaciones verticales del cubo

Rotar el cubo vertical debe requerir cambiar la animación al eje Y, ¿no? Desafortunadamente no - las caras mostrarían en algunos casos el texto hacia atrás, por lo que se tendrá que revisar la rotación de algunos elementos:

@keyframes spin-vertical {
    from { transform: rotateX(0); }
    to { transform: rotateX(-360deg); }
}

.cube-wrap.vertical .cube {
    margin: 0 auto; /* keeps the cube centered */

    transform-origin: 0 100px;
    animation: spin-vertical 5s infinite linear;
}

.cube-wrap.vertical .top {
    transform: rotateX(-270deg) translateY(-100px);
}

.cube-wrap.vertical .back {
    transform: translateZ(-100px) rotateX(180deg);
}

.cube-wrap.vertical .bottom {
    transform: rotateX(-90deg) translateY(100px);
}

... así como cambiar la animación.

Acoplar el cubo

Para conseguir el aspecto 3D del cubo, y simplemente mostrar un bloque a la vez (sin otra cara dando a entender), eliminar los ajustes de perspectiva y origen de la envoltura:

.wrap {
    /* no more perspective */
    perspective: none;
    perspective-origin: 0 0;
}

Ahora se mostrará una sola cara en cualquier momento dado.

Nota para todo el CSS: Algunas propiedades CSS pueden necesitar prefijos de proveedores

Ver demo cubo CSS

Los cubos en CSS han estado olvidados por un tiempo, pero espero que este artículo simplifique tu diseño lo suficiente para que puedas usarlos de nuevo. Y no te desanimes si llegas a tener problemas creando el cubo... yo también los tuve.