Formación y tecnología: Construir un cubo 3D con HTML5 y CSS3

martes, 20 de septiembre de 2011

Construir un cubo 3D con HTML5 y CSS3

post thumbnail

HTML5 y CSS aportan nuevas novedades a los diseñadores, muy útiles y más fáciles de implementar que las de CSS2. Os enseñaré a crear un cubo 3D con CSS, parecido al que os mostré anteriormente. Las letras del cubo son las siglas del logotipo de WebProNews.

Para empezar, necesitamos 3 imágenes separadas, cada imagen de 100 x 100 píxeles, degradado de claro a oscuro. Incluye las letras W, P y N en cada imagen respectiva, después añade dos píxeles de borde. Tendría que quedar así:

Código CSS

Ahora que tenemos nuestras imágenes, vamos a empezar a crear el código CSS.

.cube {

 position: absolute;
 top: 100px;
 left: 100px;
}

El contenedor de nuestro cubo se llamará .cube, no necesitamos aplicarle altura y anchura, pero es recomendable aplicarle posición absoluta.

.face {
 position: relative;
 width: 100px;
 height: 100px;
 overflow: hidden;
}

Después necesitamos crear una característica global para cada cara de nuestro cubo. En esta parte si será necesario utilizar el posicionamiento absoluto. Indicaremos una altura y anchura de 100 píxeles, y ocultaremos el overflow para que si las imágenes son más largas, no destruyan el cubo.

.top {
 top: 0;
 left: 89px;
 background: #ffffff;
 -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
 -moz-transform: rotate(-45deg) skew(15deg, 15deg);
}

Ahora posicionaremos la imagen superior del cubo con top y left. Después añadiremos el color de fondo, que no es necesario pero queda mejor. La siguiente parte seguramente sea la más importante, la nueva propiedad CSS3 transform. Muchos navegadores ya soportan esta propiedad, por lo que no tendremos problemas. Necesitamos incluir dos líneas extra para navegadores basados en webkit y para Firefox con el objetivo de que se muestre correctamente. Rotaremos el cubo 45º en el sentido de las agujas del reloj, 15º en posición oblicua para hacerlo coincidir con las otras caras del cubo.

.left {

 top: 77px;
 left: 44px;
 background: #ffffff;
 color: #ffffff;
 -webkit-transform: rotate(15deg) skew(15deg, 15deg);
 -moz-transform: rotate(15deg) skew(15deg, 15deg);
}

La cara izquierda del cubo está establecida muy cerca que la superior, por lo que únicamente deberemos moverla 77 píxeles desde la parte superior del contenedor y 44 píxeles a la izquierda. Después necesitaremos rotar la cara 15º y mantenerla oblicua como la superior.

.right {
 top: 77px;
 left: 133px;
 background: #ffffff;
 color: #ffffff;
 -webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
 -moz-transform: rotate(-15deg) skew(-15deg, -15deg);
}

Después debemos construir un espejo de la cara izquierda con la derecha, es decir, las mimas propiedades de forma invertida.