Contenido

Cubos 3D usando CSS Transformations

8 may

+ 15

Hace ya más de un año hablamos de una serie de propuestas para CSS3 que el equipo de WebKit estaba haciendo sobre las CSS Transformations. A lo largo del año, hemos visto algunas aplicaciones de estas propiedades que ya podemos encontrar en algunos navegadores. La última viene de manos de Paul Hayes, y via Ajaxian, descubro que está montando cubos 3D con CSS transformations.

multiple-cubes-css
(Ver Imagen)

¿Como están hechos?

Para comprender la importancia de esas nuevas funcionalidades del CSS3, veamos como están montados estos cubos que hasta el momento únicamente funcionan sobre Safari, Chrome y Firefox 3.5. Y para los demás navegadores requieren una buena dosis de Javascript.

HTML

El HTML, osea la estructura del cubo es muy sencilla y cada uno de ellos tiene algo similar a esto.

<div class="cube">
        <div class="topFace">
                <div>
                        Content
                </div>
        </div>
        <div class="leftFace">
                Content
        </div>
        <div class="rightFace">
                Content
        </div>
</div>

CSS (Aplicamos la mágia)

El CSS  además de definir el tamaño de las caras del cubo nos define el efecto de 3D que hemos de aplicar a cada una de ellas.

.cube {
	position: relative;
	top: 200px;
}

.rightFace,
.leftFace,
.topFace div {
	padding: 10px;
	width: 180px;
	height: 180px;
}

.rightFace,
.leftFace,
.topFace {
	position: absolute;
}

.leftFace {
	-webkit-transform: skewY(30deg);
	-moz-transform: skewY(30deg);
	background-color: #ccc;
}

.rightFace {
	-webkit-transform: skewY(-30deg);
	-moz-transform: skewY(-30deg);
	background-color: #ddd;
	left: 200px;
}

.topFace div {
	-webkit-transform: skewY(-30deg) scaleY(1.16);
	-moz-transform: skewY(-30deg) scaleY(1.16);
	background-color: #eee;
	font-size: 0.862em;
}

.topFace {
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	top: -158px;
	left: 100px;
}

Yo no veo nada de Javascript, lo que hace que el navegador se encargue de generar estos efectos de una forma más rápida y eficiente. Un avance hacia una nueva Internet, sin duda.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.