Rotaciones libres en cualquier navegador con CSS

A medida que más sitios hablan del CSS3, algunos van descubriendo que ciertas caracterísiticas ya existian desde hace tiempo en los filtros de Internet Explorer. Sin duda, no son lo mismo pero algunas cosas pueden usarse con limitaciones y es bueno que los que crean tutoriales ejemplos los incorporen ya que sino, caemos en el error de creer que, o debemos limitarnos a lo que Internet Explorer decide u odiarlo porque no hace lo que quisiéramos que haga. Ninguna de las dos posturas es correcta, ese, como todos los demás navegadores, tienen bugs y tratan las propiedades de manera diferente así que, mejor nos acostumbramos a eso porque es algo que no va a cambiar jamás.

css3please.com es uno de esos tutoriales que ha comenzado a incorporar esos filtros y nos ayuda a utilizarlos, ya que nos permite ir viendo los resultados online y copiar el código necesario. Obviamente, no lo hará con todas las propiedades ya que no todas tienen un equivalente pero, es una buna forma de aprender.

La que me resultó más interesante es la rotación. Si bien en Internet Explorer hay un filtro para eso, está limitado a rotaciones simples de 90 grados o de 180 grados lo que hace que podamos "invertir" algo pero no "rotarlo" de manera libre:

-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)

Gracias a otro filtro de IE llamado Matrix, también podemos rotar algo en ángulos diferentes. Es uno de esos filtros tan complejos que ni siquiera vale la pena entender si es que nos queremos limitar a hacer algo sencillo. Para eso está la página que nos ayuda con los datos y basta poner el ángulo para que nos de la respuesta.

Vamos a crear entonces un DIV con cualquier contenido y abusando un poco de algunas otras propiedades como las gradientes:

div.rotar {
  background-image: -moz-linear-gradient(100% 100% 90deg, #000, #662200);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#000), to(#662200));
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF000000', EndColorStr='#FF662200');
  border: 1px solid #FFF;
  color: #FFF;
  font-family: Verdana;
  font-size: 24px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  width: 250px;
}

<div class="rotar"> ....... </div>

Lo que veríamos es esto:

Aliquam luctus nisl vitae ligula pharetra quis sodales lectus suscipit!

Y ahora, lo rotamos 90 grados en un sentido:

.derecha90 {
  -moz-transform: rotate(45deg);  /* Firefox */
  -o-transform: rotate(45deg);  /* Opera */
   -webkit-transform: rotate(45deg);  /* Safari y Chrome */
  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE */
}

<div class="rotar derecha90"> ....... </div>

Aliquam luctus nisl vitae ligula pharetra quis sodales lectus suscipit!

Y hacemos lo mismo en el otro sentido:

.izquierda90 {
   -moz-transform: rotate(-45deg);  /* Firefox */
  -o-transform: rotate(-45deg);  /* Opera */
  -webkit-transform: rotate(-45deg);  /* Safari y Chrome */
  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476); /* IE */
}

<div class="rotar izquierda90"> ....... </div>

Aliquam luctus nisl vitae ligula pharetra quis sodales lectus suscipit!