Transformaciones y prefijos
Entre las opciones que encontramos en las hojas de estilo modernas se encuentra la propiedad transform que se emplea para aplicar transformaciones a un elemento. Éstas son las opciones disponibles:
- translate, translate3d, translateX, translateY y translateZ: definen diferentes tipos de traslaciones sobre el objeto indicado.
- scale, scale3d, scaleY, scaleY y scaleZ: redimensionan el objeto, en su conjunto, en ejes parciales.
- rotate, rotate3d, rotateX, rotateY, rotateZ: aplican una rotación al objeto, como en los casos anteriores; se rota en su conjunto o sólo en un plano específico. Van seguidas de un ángulo.
- skew, skewX y skewY: realizan un abatimiento del elemento.
- perspective: modifica su perspectiva.
- matrix y matrix3d: definen una transformación utilizando 6 valores o 16 en el segundo caso.
Los prefijos
Las transformaciones nos sirven para explicar un pequeño inconveniente del uso de propiedades modernas. En algunos casos, las propiedades más actuales no funcionan en todos los navegadores y en otros, cada navegador ha realizado su propia implementación de la propiedad, a la espera de que el grupo que define las hojas de estilo CSS3 complete del todo la definición de propiedades.
¿Cómo se diferencian, pues, las implementaciones que hace cada navegador? Añadiendo un prefijo específico diferente en cada caso. Así la propiedad transform es un caso prototípico. En la actualidad el panorama es el siguiente:
Tenemos la propiedad real, llamada transform, que no funciona aún en ningún navegador.
- Internet Explorer puede realizar todas las transformaciones 2D, pero para ello usaremos su propia versión llamada -ms-transform.
- Firefox también hace lo mismo, pero con su versión llamada -moz-transform.
- Opera funciona como los dos anteriores, pero con una versión llamada -o-transform.
- Chrome y Safari, que emplean el mismo motor de presentación de páginas, además de las 2D hacen las transformaciones 3D ya, pero con su propiedad -webkit-transform.
En este punto sólo podemos estar agradecidos porque sólo haya cinco navegadores web populares: imaginemos un mundo con 50 de ellos...
Todo esto nos lleva a que, si quisiéramos aplicar una rotación de 30 grados a un elemento y quisiéramos que funcionase en cualquier navegador, deberíamos añadir una propiedad similar a ésta:
div#bloque5 {
-ms-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-o-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
}
Transiciones
Las transiciones permiten definir la velocidad y el momento en que se aplica una variación en una propiedad.
Al igual que con las transformaciones, las transiciones no están implementadas en ningún navegador sin utilizar los prefijos anteriores. Si lo hacemos, contaremos con la propiedad transition-property, que va seguida de alguna transición y de la propiedad transition-duration, seguida de un valor en segundos. Opcionalmente podemos añadir transition-delay para hacer una pausa, antes de que comience la transición.
El resultado es una animación que se desarrolla a lo largo del tiempo. Para ver cómo funciona probaremos a añadir lo siguiente a algún elemento de nuestra página web:
div#bloque1:hover {
width:500px ;
-webkit-transition-property: width;
-webkit-transition-duration: 10s;
-webkit-transition-delay: 1s;
}
Al aplicarlo en Chrome, veremos cómo el elemento en cuestión va incrementando su anchura durante 10 segundos, pero sólo cuando haya pasado 1 segundo desde que se cargó la página. Para que esto tenga lugar, necesitaremos cambiar la propiedad de algún modo. Por eso definimos el estilo como: hover (cuando el ratón pase sobre el elemento), aunque también podríamos realizar la operación al pulsar un botón externo, usando eventos, etc.
La clave de su funcionamiento está en que va a transformar la anchura (transition-property: width) del elemento bloque1 para ampliar hasta los 500 píxeles pero, en lugar de hacerlo brúscamente, lo hará progresivamente durante 10 segundos (transition-duration).
Podemos indicar tantas propiedades como necesitemos y cambiaremos sólo aquellas que queramos mediante transition-property seguido de las propiedades, o todas juntas si indicamos transition-property:all.