Un cubo 3D con contenido HTML

Un cubo 3D con contenido HTML

Buenas, ahora un tutorial tratado de 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í.

Este es el esquema, el codigo 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>

Que seria este el cubo:

Esta es la cara superior del cubo ... Aqui escribe lo que quieras, esta muy bueno. Like a 998pow un gran sitio de recursos y codigos para tu web o blog, noticias, descargas ...

Esta es la cara izquierda

Con textos formateados con diferentes etiquetas y estilos.

Siguenos en Twitter, @998pow

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

Claro que no estara el diseño/esquema sin las propiedades CSS elementales para culminar:

 <style> .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; } </style>

1.  ¿Te gusto el tutorial? → Siguenos en nuestras redes sociales para más!. 
2. Comentar es Agradecer.

¡Compártelo!

Tweet