Cubo con CSS

Hacer que nuestro site, blog, etc, sea más llamativo siempre nos genera muchas inquietudes de como podemos conseguir esto.
Una de las maneras mas fácil de hacerlo es sin duda con el CSS que nos brinda múltiples opciones y lo mejor es que no aumento en mucho el tiempo de carga de la pagina.
Aquí he traído una sencilla pero llamativa manera de mostrar un contenido corto. Esto es con un cubo en 3D.

El marco

---

Para esto solo crearemos un contenedor en el que ubicaremos tres etiquetas div en su interior y que seran las responsables de alojar el contenido de cada cara.

<div class="cube">
<div class="topFace">
<div> ... el contenido de la cara superior ... </div>
</div>
<div class="leftFace"> ... el contenido de la cara izquierda ...
</div>
<div class="rightFace"> ... el contenido de la cara derecha ...
</div>
</div>

El CSS

---

Aquí vamos a definir las propiedades del cubo y de cada una de las caras.

.cube {
    height: 480px;
    left: 150px;
    position: relative;
    top: 150px;
    width: 600px;
}
.rightFace, .leftFace, .topFace div {
    padding: 10px;
    height: 180px;
    width: 180px;
}
.rightFace,.leftFace,.topFace {
    position: absolute;
}
.leftFace {
    transform: skewY(30deg);
    background-color: #9AB;
}
.rightFace {
    transform: skewY(-30deg);
    background-color: #89A;
    left: 200px;
}
.topFace div {
    transform: skewY(-30deg) scaleY(1.16);
    background-color: #ABC;
}
.topFace {
    transform: rotate(60deg);
    left: 100px;
    top: -158px;
}

Para finalizar aquí tenemos la previsualización de este efecto.

---

... el contenido de la cara superior ...

... el contenido de la cara izquierda ...

... el contenido de la cara derecha ...

---

Lo único que tenemos que hacer es jugar con los colores, tamaños y rotaciones para adaptarlo a nuestro gusto y necesidades.