Igual que disponí­amos la fecha con CSS Sprites, ahora queremos rotar un texto para crear una fecha gracias a CSS Transformations.

Explicación de su funcionamiento

CSS Mágico

La clave de estas rotaciones se encuentran en CSS Transformations, y tanto Firefox como Safari tienen esta ventaja:

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

Es decir:

-webkit-transform: rotate(VALORdeg);-moz-transform: rotate(VALORdeg);

Para realizar esta transformación, el elemento debe tener la propiedad display, con el valor block, es decir, display: block;. Debes añadir esta declaración al \”span\” que quieras rotar.En cambio, Internet Explorer no es compatible con este hack, por lo deberemos hacer uso de los filtros. Se inserta en el código CSS igualmente:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Pero en la línea de código para Internet Explorer, es necesario insertar un valor del 1 al 3, en vez de grados:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=VALOR);

En el valor, es necesario añadir:
0: no rotar.
1: rotar 90 grados
2: rotar 180 grados
3 :rotar 270 grados (-90 grados).
Si deseas saber más sobre esto, echa un vistazo a los comentarios condicionales.

Estructura

Ahora mostraremos la estructura para poder crear este hack:

Código CSS

example-date {background-color: #123;border: 1px solid #345;padding: 45px 5px 0;position:relative;width: 60px;}

.example-date .example-day {font-size: 45px;left: 5px;line-height: 45px;position: absolute;top: 0;}

.example-date .example-month {font-size: 25px;text-transform: uppercase;}

.example-date .example-year {

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

display: block;position: absolute;

right: -5px;top: 15px;}

Código HTML

<div class="example-date">

<span class="day">31</span>

<span class="month">July</span>

<span class="year">2009</span>

</div>

Estandarización

CSS 2.1 inválido.

XHTML 1.0 Transitional válido.

Ejemplo de su funcionamiento

Podemos ver un ejemplo de su funcionamiento en su página de origen:

Conclusión

Aunque es un hack útil para muchos, no renderiza bien el texto en los distintos navegadores disponibles.

¿Qué os parece?

Vía | Snook