CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */

CSS cada vez avanza más. Se van creando propiedades nuevas que anteriormente eran impensables. Webkit hace poco estaba haciendo una serie de propuestas para CSS3, CSS Animations. Algunas de estas propiedades ya están siendo soportadas por los navegadores. Una de las más modernas consiste en crear cubos 3D con CSS Transformations.

Estructura

Estos cubos por el momento funcionan únicamente en Safari 3.2+. Safari 4+, Google Chrome y Firefox 3.5+. Se puede usar código Javascript para que sea compatible con los demás navegadores, pero requiere mucho y no resulta efectivo ya que enlentece la carga de la página.

HTML

La estructura HTML es muy sencilla, todos los cubos utilizan este mismo código HTML:

<div class="cube">
        <div class="topFace">
                <div>
                        Tu texto
                </div>
        </div>
        <div class="leftFace">
                Tu texto
        </div>
        <div class="rightFace">
                Tu texto
        </div>
</div>

CSS

Además del tamaño de cada cara del cubo, podremos definir el efecto 3D que 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;
}

Todo ello solo usando CSS, lo que hace la carga de la página mucho más rápida y accesible.

Estandarización

CSS 2.1 inválido.

XHTML 1.0 Transitional válido.

Ejemplo de su funcionamiento

Ejemplo de Cubo 3D con CSS para Safari 3.2+, Google Chrome y Firefox 3.5+.

Ejemplo de Cubo 3D con CSS para Safari 4+ y Google Chrome.

Vía | Fofronline