CSS3: Transformaciones en 2D

csstransform

Mientras esperamos a la llegada definitiva de la versión 3 de CSS, no puedo evitar ir trasteando las nuevas propiedades, y esta vez le he echado el ojo a “transform” y “transform-origin”.

Con transform podemos modificar elementos de varias formas:

1. Transladar el elemento a otra posición:

elemento{transform:translate(a,b);}

2. Escalar el elemento:

elemento{transform:scale(a);}

3. Rotar el elemento:

elemento{transform:rotate(a);}

4. Sesgar el elemento:

elemento{transform:skew(a,b);}

5. Deformar el elemento:

elemento{transform:matrix(a,b,c,d);}

Por defecto, la mayoría de los navegadores asignan como punto de origen de las transformaciones el centro del elemento (50% 50%), pero podemos modificar este punto con la propiedad transform-origin:

Poniendo, por ejemplo, el punto de origen en la esquina superior izquierda:

elemento{transform-origin:0 0;}

Como aún no es compatible esta propiedad de CSS3 con los navegadores actuales, existen unas cuantas alternativas para que functione en todos los navegadores (IE6 incluido), pero hay que tener en cuenta que si las utilizamos ahora mismo nuestro código no validará.

En firefox: -moz-transform / -moz-transform-origin
En Safari / Chrome: -webkit-transform / -webkit-transform-origin
En Opera: -o-transform / -o-transform-origin

Para hacerlo compatible con Internet Explorer, nos complican un poco más, por defecto nos pone de punto de origen la esquina superior izquierda y no nos deja modificarla y solo podemos transformarlo con el filtro Matrix, que nos deja deformarlo de cualquier forma, pero es algo más complicado, aunque he encontrado un generador online que nos puede servir de ayuda.

Los modelos de filtros serían:

– En Internet Explorer 8:

-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11,M12,M21,M22)";

– En Internet Exporer 6 y 7:

filter:progid:DXImageTransform.Microsoft.Matrix(M11,M12,M21,M22);

Si preferís verlo en directo, he creado una página con ejemplos de transformación 2D, espero que lo veáis más claro :)

  • 22 febrero 2011
  • Maquetación

2 comments on “CSS3: Transformaciones en 2D”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *