Un cubo 3D con contenido HTML

El cubo 3D generado sólo con CSS es un experimento de fofronline que aprovecha las propiedades -moz-transform de Fire­fox 3.5 y -webkit-transform de Safari así que sólo es visible en esos navegadores.

Deberían ver algo así.

Me adelanto .. no, no creo que tenga demasiada aplicación practica.

Esta es la cara superior del cubo ... y sólo contiene un texto de prueba ... el viejo Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Esta es la cara izquierda

Con textos formateados con diferentes etiquetas y estilos.

Sed diam nonummy nibh euismod tincidunt

Esta es la cara derecha y aqui puse un texto y una imagen

Este es el esquema del código HTML:

<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>

Y estas las propiedades CSS elementales:

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