Rotar, transformar, jugar con CSS

En un foro, alguien comentaba burlonamente: "Esto funcionaba en IE5.5, hace 10 años. Pasó mucho tiempo hasta que se incorporó a navegadores como Safari y recién ahora es posible aplicarlo en Firefox 3.5 ... bueno ... pero, aún le falta implementar la parte de 3D .. tal vez, en algunos años ..."

¿De que hablaba? De una propiedad CSS llamada genéricamente Transform y que permite eso que dice su nombre, transformar el contenido de un elemento.

Tenía razón. Lentamente, los navegadores están incorporando algunos de estos filtros que ya existían aunque les ponen otros nombres y nos obligan a escribir muchas más cosas (¿cómo era ese cuento chino del respeto a los estándares?) ... en fin, no importa, lo importante es que podemos usarlos aunque debamos escribir de más:

• DXImageTransform.Microsoft.BasicImage (Internet Explorer)
• -webkit-transform (Safari | Chrome)
• -moz-transform (Firefox)

Un tweet de DanielUlczyk me lleva a snook.ca antes de leerlo en los feeds y allí nos muestran un ejemplo aplicado a las fechas estilo calendario. No explican nada pero bueno ... sería algo así:

31July2009

<style type="text/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;
}
</style>

<div class="example-date">
  <span class="example-day">31</span>
  <span class="example-month">July</span>
  <span class="example-year">2009</span>
</div>

Aplicándolo así, directamente, es poco flexible, el resultado dependerá del tipo de fuente y sobre todo, de la longitud de los textos:

28jul2009

28ago2009

1dic2009

Así que lo mejor es usar unidades relativas como em. Este es un un ejemplo basado en la fecha de los posts:

31jul2009

31jul2009

28ago2009

1dic2009

<style type="text/css">
.fechademo {
  display: block;
  font-family: Verdana,Arial;
  font-size: 41px;
  font-weight: normal;
  height: 1em;
  line-height: 18px;
  padding: 10px 0 0;
  position: relative;
  width: 1.8em;
}
.diademo {
  color: #789;
  display: block;
  font-family: Times New Roman;
  letter-spacing: -2px;
  line-height: .7em;
  text-align: center;
  width: 1.8em;
}
.mesdemo {
  color: #DCDCDC;
  display: block;
  font-size: 0.4em;
  text-align: center;
}
.aniodemo {
  color: #D93;
  display: block;
  font-size: 0.35em;
  position: absolute;
  right: -0.6em;
  top: 16px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>

<div class="fechademo">
  <span class="diademo">28</span>
  <span class="mesdemo">ago</span>
  <span class="aniodemo">2009</span>
</div>

La rotación está definida en grados tanto valores positivos como negativos aunque en IE se define con un código numérico:

-webkit-transform: rotate(VALORdeg);
-moz-transform: rotate(VALORdeg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=VALOR);
     donde:
          0 es no rotar
          1 rota 90 grados
          2 rota 180 grados
          3 rota 270 grados (-90 grados)

En resumen, hay diferencias y detalles que deberán tenerse en cuenta pero:

Rotar no es el único efecto posible, hay muchos más y vale la pena mirar, tanto para Internet Explorer como para Firefox