Animacin en CSS3 (V)

La propiedad transform
Concepto de transformacin.
La transformacion en CSS3 es un efecto que permite a un elemento cambiar de forma, tamao o posicin. La transformacin en si no es ninguna animacin, sino que simplemente se muestra el elemento cambiado, sin embargo las transformaciones pueden utilizarse en animaciones y transiciones, de manera que vemos cmo el elemento cambia de forma, tamao o posicin. Tenemos dos tipos de transformaciones, las 2D o en el plano, y las 3D o en el espacio. Comenzaremos por las transformaciones en el plano o 2D.

La propiedad transform
Todas las transformaciones se consiguen por medio de la propiedadtransform, la cual tiene como valor diversos mtodos. transform: <metodo>+; El mtodo acta como una funcin interna. La forma de escribir un mtodo es igual que una llamada a una funcin, tal como hacemos en javascript o php. transform: metodo(a,b); donde metodo es siempre una palabra clave y a,b son los parmetros o argumentos que le pasamos al mtodo. Veamos los distintos mtodos de la propiedad transform. NAVEGADORES : Esta propiedad slo funciona en los navegadores de forma experimental, por lo que debemos ponerle los siguientes prefijos: -moz- para Firefox; -webkit- para Safari y Chrome; -o- para Opera; -ms- Para Internet Explorer 9. En Internet Explorer 8 o versiones anteriores no funciona esta propiedad.

El mtodo translate
El mtodo translate cambia de posicin el elemento (traslacin), moviendolo hacia donde indican los parmetros. transform: translate(30px,5px); Dentro del parntesis pondremos dos parmetros, el primero es la traslacin que se produce en horizontal, hacia la derecha, (eje X), y el segundo la traslacin en vertical, hacia abajo (eje Y).

Los parmetros deben ser siempre medidas de longitud, si su valor es negativo el elemento se desplazara hacia la izquierda (primer parmetro) o hacia arriba (segundo parmetro). Veamos el seguiente ejemplo, le aplicamos a un elemento el siguiente cdigo: #capa1 { transform: translate(150px,20px);} El resultado lo vemos aqu a la derecha: Elemento original transform: translate (10px,100px) El elemento se desplaza respecto a su posicin original. Mostramos aqu cual era la posicin original y cual la que toma tras la traslacin. En realidad el cdigo que hemos utilizado es algo ms largo debido a que debemos compatibilizarlo con los diferentes navegadores:
#capa1 { transform: translate(150px,20px); /*W3C*/ -moz-transform: translate(150px,20px); /*Firefox*/ -webkit-transform: translate(150px,20px); /*Safari y Chrome*/ -o-transform: translate(150px,20px); /*Opera*/ -ms-transform: translate(150px,20px); /*IE 9*/ }

Los mtodos translateX y translateY

Los mtodos tanslateX y translateY desplazan tambin el elemento de su posicin original, funcionan igual que el mtodo translate pero slo en una direccin, por eso slo tienen un parmetro: transform: translateX(150px); Desplaza el elemento a lo largo del eje X (horizontal). transform: translateY(20px); Desplaza el elemento a lo largo del eje Y (vertical).

El mtodo rotate
El mtodo rotate gira el elemento respecto a su posicin original, el ngulo de giro viene indicado en el parmetro: transform: rotate(30deg); El ngulo de rotacin indicado en el parmetro puede indicarse en grados (deg) o en radianes (rad), veamos un ejemplo: #capa2 {transform: rotate(30deg);} El resultado de aplicar este cdigo a un div id="capa2" lo vemos a la derecha. Elemento original transform: rotate (30deg) En color ms claro hemos puesto debajo el elemento original. El elemento gira en el sentido de las agujas del reloj. Un ngulo negativo hace que gire en sentido contrario. Al igual que en el los mtodos anteriores, la propiedad transformdebemos repetirla con el prefijo de los distintos navegadores, para que se pueda ver.

El mtodo scale
El mtodo scale aumenta o reduce de tamao el elemento original (escalar). Los ejes horizontal y vertical se controlan independientemente, por lo que podemos escalarlo de distinta manera en los dos ejes. los parmetros son nmeros que indican la proporcin en la que se debe aumentar o reducir. los decimales menores que 1 reducen el tamao. transform: scale(1.2,0.8); Este mtodo utiliza dos parmetros, que son dos nmeros, el primer nmero indica indica la proporcin en el eje X (horizontal), y el segundo en el eje Y (vertical). Veamos un ejemplo: #capa3 { transform: scale(1.2,0.8);} Elemento original transform: scale (0.8,1.2); El resultado de aplicar este mtodo a un div id="capa3" es el que vemos a la derecha. Como en los mtodos anteriores hemos puesto debajo el elemento original. Como en los casos anteriores, en el cdigo real debemos repetir la propiedad transform con los prefijos de los distintos navegadores.

Los mtodos scaleX y scaleY.

Descomponen el mtodo anterior para los dos ejes del plano. Cada uno de estos mtodos controla el escalamiento del elemento en un eje del plano, por eso slo llevan un parmetro: transform: scaleX(1.2); el mtodo scaleX aumenta o disminuye el tamao en el eje X u horizontal. transform: scaleY(0.8); el mtodo scaleX aumenta o disminuye el tamao en el eje Y o vertical.

El mtodo skew.
El mtodo skew sesga el elemento original, es decir lo convierte en un romboide. para ello se inclinan los lados horizontal y vertical en los ngulos indicados. transform: skew(10deg,15deg); El primer parmetro indica la inclinacin de los lados verticales, y el segundo el de los lados horizontales. Los parmetros son medidas de ngulos los cuales se pueden poner en grados (deg) o en radianes (rad). Los ngulos negativos inclinan el elemento hacia el lado contrario. Veamos un ejemplo: #capa4 {transform: skew(10deg,15deg);} Elemento original transform: skew (10deg,15deg); El resultado este mtodo a un div id="capa4" es el que vemos a la derecha.

Como siempre en color ms claro hemos puesto debajo el elemento original. El cdigo debemos repetirlo para los distintos navegadores con los prefijos de cada uno de ellos.

Los mtodos skewX y skewY

Descomponen el mtodo anterior en sus dos componentes. skewXinclina slo los lados verticales, mientras que skewY inclina slo los lados horizontales, es por eso que slo tienen un parmetro: transform: skewX(10deg); Los lados verticales se inclinan 10 grados, y los horizontales se quedan en la misma lnea. transform: skewY(15deg); Los lados horizontales se inclinan 15 grados, y los verticales se quedan en la misma lnea.

El mtodo matrix.
El mtodo matrix combina todos los mtodos anteriores. Utiliza 6 parmetros que se obtienen transformando las cordenadas de los vrtices en una matriz. La frmula es algo complicada para el que no entiende de matemticas avanzadas. y podemos verla en Math is amazingly powerful / 8.5. Coordinate Transformation Matrices. Un ejemplo sera el siguiente: #capa5 {transform: matrix(0,-1,-1.22,-0.88,11,11);} Elemento original transform: matrix (0, -1, -1.22, -0.88, 11, 11); Este ejemplo nos dara el resultado que vemos a la derecha. Como siempre debemos repetir el cdigo para todos los navegadores, y adems para Firefox, los dos ltimos parmetros debemos indicarlos como medidas en pxeles: -moz-transform: matrix(0,-1,-1.22,-0.88,11px,11px); En los dems navegadores los parmetros los escribiremos simplemente como nmeros. Una ayuda para usar este mtodo la tenemos en la pginawww.useragentman.com/matrix/ donde podemos ver como queda la transformacin con diferentes parmetros.

Usar varios mtodos

Si el uso del mtodo matrix nos parece complicado, siempre podemos utilizar varios mtodos para un mismo elemento, para ello basta con ponerlos seguidos, separados simplemente por uno o varios espacios. #capa6 {transform: scale(1.5,0.5) rotate(45deg);} Elemento original transform: scale (1.5,0.5) rotate (45deg) El resultado es como ves en la derecha. Despus detransform: podemos poner tantos mtodos como queramos, el resultado ser el de aadir varios efectos a la vez.

Propiedad transform-origin

La propiedad transform-origin indica cual ser el punto de origen desde el que se transforma el elemento. Este punto, por defecto es el centro del elemento. Como hemos visto en los ejemplos anteriores, tanto las rotaciones, los escalamientos, los sesgos y los traslados se hacen tomando como punto de referencia el centro, tanto en horizontal como en vertical. Esta propiedad permite cambiar ese punto. veamos su sintaxis: transform-origin: [ <porcentaje> | <medida> | left | center | right ] [ <porcentaje> | <medida> | top | center | bottom ]; Es decir, la propiedad tiene dos valores, el primero de ellos indica la coordenada X (horizontal) del origen, la cual puede expresarse en porcentaje, medida o las palabras claveleft | center | right que indican respectivamente el lado izquierdo, el centro o el lado derecho del elemento. El segundo valor indica la coordenada Y (vertical) y puede expresarse en porcentaje, medida o las palabras clave top | center | bottom que indican respectivamente el lado superior, el centro o el lado inferior.

En la prxima pgina veremos cmo hacer que transformaciones puedan verse tambin en Internet Explorer 8. Transformaciones En Internet Explorer.

las

Animacin en CSS3 (V)

La propiedad transform
Concepto de transformacin.
La transformacion en CSS3 es un efecto que permite a un elemento cambiar de forma, tamao o posicin. La transformacin en si no es ninguna animacin, sino que simplemente se muestra el elemento cambiado, sin embargo las transformaciones pueden utilizarse en animaciones y transiciones, de manera que vemos cmo el elemento cambia de forma, tamao o posicin.

Tenemos dos tipos de transformaciones, las 2D o en el plano, y las 3D o en el espacio. Comenzaremos por las transformaciones en el plano o 2D.

La propiedad transform
Todas las transformaciones se consiguen por medio de la propiedadtransform, la cual tiene como valor diversos mtodos. transform: <metodo>+; El mtodo acta como una funcin interna. La forma de escribir un mtodo es igual que una llamada a una funcin, tal como hacemos en javascript o php. transform: metodo(a,b); donde metodo es siempre una palabra clave y a,b son los parmetros o argumentos que le pasamos al mtodo. Veamos los distintos mtodos de la propiedad transform. NAVEGADORES : Esta propiedad slo funciona en los navegadores de forma experimental, por lo que debemos ponerle los siguientes prefijos: -moz- para Firefox; -webkit- para Safari y Chrome; -o- para Opera; -ms- Para Internet Explorer 9. En Internet Explorer 8 o versiones anteriores no funciona esta propiedad.

El mtodo translate
El mtodo translate cambia de posicin el elemento (traslacin), moviendolo hacia donde indican los parmetros. transform: translate(30px,5px); Dentro del parntesis pondremos dos parmetros, el primero es la traslacin que se produce en horizontal, hacia la derecha, (eje X), y el segundo la traslacin en vertical, hacia abajo (eje Y). Los parmetros deben ser siempre medidas de longitud, si su valor es negativo el elemento se desplazara hacia la izquierda (primer parmetro) o hacia arriba (segundo parmetro). Veamos el seguiente ejemplo, le aplicamos a un elemento el siguiente cdigo: #capa1 { transform: translate(150px,20px);} El resultado lo vemos aqu a la derecha: Elemento original transform: translate (10px,100px) El elemento se desplaza respecto a su posicin original. Mostramos aqu cual era la posicin original y cual la que toma tras la traslacin. En realidad el cdigo que hemos utilizado es algo ms largo debido a que debemos compatibilizarlo con los diferentes navegadores:
#capa1 { transform: translate(150px,20px); /*W3C*/ -moz-transform: translate(150px,20px); /*Firefox*/ -webkit-transform: translate(150px,20px); /*Safari y Chrome*/ -o-transform: translate(150px,20px); /*Opera*/ -ms-transform: translate(150px,20px); /*IE 9*/ }

Los mtodos translateX y translateY

Los mtodos tanslateX y translateY desplazan tambin el elemento de su posicin original, funcionan igual que el mtodo translate pero slo en una direccin, por eso slo tienen un parmetro: transform: translateX(150px); Desplaza el elemento a lo largo del eje X (horizontal). transform: translateY(20px); Desplaza el elemento a lo largo del eje Y (vertical).

El mtodo rotate
El mtodo rotate gira el elemento respecto a su posicin original, el ngulo de giro viene indicado en el parmetro: transform: rotate(30deg); El ngulo de rotacin indicado en el parmetro puede indicarse en grados (deg) o en radianes (rad), veamos un ejemplo: #capa2 {transform: rotate(30deg);} El resultado de aplicar este cdigo a un div id="capa2" lo vemos a la derecha. Elemento original transform: rotate (30deg) En color ms claro hemos puesto debajo el elemento original. El elemento gira en el sentido de las agujas del reloj. Un ngulo negativo hace que gire en sentido contrario. Al igual que en el los mtodos anteriores, la propiedad transformdebemos repetirla con el prefijo de los distintos navegadores, para que se pueda ver.

El mtodo scale
El mtodo scale aumenta o reduce de tamao el elemento original (escalar). Los ejes horizontal y vertical se controlan independientemente, por lo que podemos escalarlo de distinta manera en los dos ejes. los parmetros son nmeros que indican la proporcin en la que se debe aumentar o reducir. los decimales menores que 1 reducen el tamao. transform: scale(1.2,0.8); Este mtodo utiliza dos parmetros, que son dos nmeros, el primer nmero indica indica la proporcin en el eje X (horizontal), y el segundo en el eje Y (vertical). Veamos un ejemplo: #capa3 { transform: scale(1.2,0.8);} Elemento original transform: scale (0.8,1.2); El resultado de aplicar este mtodo a un div id="capa3" es el que vemos a la derecha. Como en los mtodos anteriores hemos puesto debajo el elemento original. Como en los casos anteriores, en el cdigo real debemos repetir la propiedad transform con los prefijos de los distintos navegadores.

Los mtodos scaleX y scaleY.

Descomponen el mtodo anterior para los dos ejes del plano. Cada uno de estos mtodos controla el escalamiento del elemento en un eje del plano, por eso slo llevan un parmetro: transform: scaleX(1.2); el mtodo scaleX aumenta o disminuye el tamao en el eje X u horizontal. transform: scaleY(0.8); el mtodo scaleX aumenta o disminuye el tamao en el eje Y o vertical.

El mtodo skew.
El mtodo skew sesga el elemento original, es decir lo convierte en un romboide. para ello se inclinan los lados horizontal y vertical en los ngulos indicados. transform: skew(10deg,15deg); El primer parmetro indica la inclinacin de los lados verticales, y el segundo el de los lados horizontales. Los parmetros son medidas de ngulos los cuales se pueden poner en grados (deg) o en radianes (rad). Los ngulos negativos inclinan el elemento hacia el lado contrario. Veamos un ejemplo: #capa4 {transform: skew(10deg,15deg);} Elemento original transform: skew (10deg,15deg); El resultado este mtodo a un div id="capa4" es el que vemos a la derecha. Como siempre en color ms claro hemos puesto debajo el elemento original. El cdigo debemos repetirlo para los distintos navegadores con los prefijos de cada uno de ellos.

Los mtodos skewX y skewY

Descomponen el mtodo anterior en sus dos componentes. skewXinclina slo los lados verticales, mientras que skewY inclina slo los lados horizontales, es por eso que slo tienen un parmetro: transform: skewX(10deg); Los lados verticales se inclinan 10 grados, y los horizontales se quedan en la misma lnea. transform: skewY(15deg); Los lados horizontales se inclinan 15 grados, y los verticales se quedan en la misma lnea.

El mtodo matrix.
El mtodo matrix combina todos los mtodos anteriores. Utiliza 6 parmetros que se obtienen transformando las cordenadas de los vrtices en una matriz. La frmula es algo complicada para el que no entiende de matemticas avanzadas. y podemos verla en Math is amazingly powerful / 8.5. Coordinate Transformation Matrices. Un ejemplo sera el siguiente: #capa5 {transform: matrix(0,-1,-1.22,-0.88,11,11);} Elemento original

transform: matrix (0, -1, -1.22, -0.88, 11, 11); Este ejemplo nos dara el resultado que vemos a la derecha. Como siempre debemos repetir el cdigo para todos los navegadores, y adems para Firefox, los dos ltimos parmetros debemos indicarlos como medidas en pxeles: -moz-transform: matrix(0,-1,-1.22,-0.88,11px,11px); En los dems navegadores los parmetros los escribiremos simplemente como nmeros. Una ayuda para usar este mtodo la tenemos en la pginawww.useragentman.com/matrix/ donde podemos ver como queda la transformacin con diferentes parmetros.

Usar varios mtodos

Si el uso del mtodo matrix nos parece complicado, siempre podemos utilizar varios mtodos para un mismo elemento, para ello basta con ponerlos seguidos, separados simplemente por uno o varios espacios. #capa6 {transform: scale(1.5,0.5) rotate(45deg);} Elemento original transform: scale (1.5,0.5) rotate (45deg) resultado es como ves en la derecha. Despus detransform: podemos poner tantos mtodos como queramos, el resultado ser el de aadir varios efectos a la vez. El

Propiedad transform-origin
La propiedad transform-origin indica cual ser el punto de origen desde el que se transforma el elemento. Este punto, por defecto es el centro del elemento. Como hemos visto en los ejemplos anteriores, tanto las rotaciones, los escalamientos, los sesgos y los traslados se hacen tomando como punto de referencia el centro, tanto en horizontal como en vertical. Esta propiedad permite cambiar ese punto. veamos su sintaxis: transform-origin: [ <porcentaje> | <medida> | left | center | right ] [ <porcentaje> | <medida> | top | center | bottom ]; Es decir, la propiedad tiene dos valores, el primero de ellos indica la coordenada X (horizontal) del origen, la cual puede expresarse en porcentaje, medida o las palabras claveleft | center | right que indican respectivamente el lado izquierdo, el centro o el lado derecho del elemento. El segundo valor indica la coordenada Y (vertical) y puede expresarse en porcentaje, medida o las palabras clave top | center | bottom que indican respectivamente el lado superior, el centro o el lado inferior.

En la prxima pgina veremos cmo hacer que transformaciones puedan verse tambin en Internet Explorer 8. Transformaciones En Internet Explorer.

las

Animaciones CSS3 (VII)

Animaciones con transform
Transiciones
La propiedad transform nos da juego para crear una serie de animaciones en la que los elementos de nuestra pgina cambian de aspecto. la forma ms fcil es meterlos dentro de una transicin con la pseudoclase hover:. El mecanismo es el mismo que vimos en la pginaTransiciones. Veamos algunos ejemplos: A un <div=id="D1">Hola mundo </div> le aplicamos el siguiente cdigo CSS:
#D1 { width:100px; height: 100px; background: red; border: 2px solid blue; borderradius: 10px; transition: all 2s; -moz-transition: all 2s; -webkit-transition: all 2s; -o-transition: all 2s; } #D1:hover { transform:rotate(360deg) scale(0.4,0.4); -moz-transform:rotate(360deg) scale(0.4,0.4); -webkit-transform:rotate(360deg) scale(0.4,0.4); -o-transform:rotate(360deg) scale(0.4,0.4); }

Hola mundo

El resultado puedes verlo aqu a la derecha. Al pasar el ratn por encima el elemento se transforma. El cdigo es el mismo que para cualquier transicin con la pseudoclase:hover: en el elemento ponemos las propiedades de la transicin, y dentro de la pseudoclase ponemos la transformacin. Veamos otro ejemplo con el siguiente <div=id="D2">Hola mundo </div>. Su cdigo CSS ser el siguiente:
#D2 { width:100px; height: 100px; background: red;

border: 2px solid blue; border-radius: 10px; transition: all 1s; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s; -o-transition: all 1s; transform:rotate(-15deg) skewY(-30deg); -moz-transform:rotate(-15deg) skewY(-30deg); -webkit-transform:rotate(-15deg) skewY(-30deg); -o-transform:rotate(-15deg) skewY(-30deg); } #D2:hover { transform:rotate(15deg) skewY(30deg); -moz-transform:rotate(15deg) skewY(30deg); -webkit-transform:rotate(15deg) skewY(30deg); -o-transform:rotate(15deg) skewY(30deg); }

Hola mundo Aqu partimos de un elemento que tiene ya una transformacin, y cambiamos los valores de esa transformacin en la pseudoclase hover. Al pasar el ratn por encima el elemento cambia de forma pasando de la primera transformacin a la segunda.

Animaciones
Hacer animaciones cambiando la propiedad transform consiste en pasar en la animacin de unos valores en los mtodos de transform a otros. Para ello ponemos la propiedad transform dentro de la regla @keyframes, y en concreto dentro de cada subregla, indicando en cada una de ellas los metodos con sus valores:
@keyframes anim1 { from { transform: scaleX(1) rotate(-15deg) ; } to { transform: scaleX(-1) rotate(15deg); } } @-moz-keyframes anim1 { from { -moz-transform: scaleX(1) rotate(-15deg) to { -moz-transform: scaleX(-1) rotate(15deg); } @-webkit-keyframes anim1 { from { -moz-transform: scaleX(1) rotate(-15deg) to { -moz-transform: scaleX(-1) rotate(15deg); }

; } } ; } }

Despus ponemos el cdigo CSS para el elemento al que se le aplica, el cual debe tener las propiedades de animacin:
#D3 { width: 100px; height: 100px; background: red; border: 2px solid blue; border-radius: 10px; animation: anim1 2s ease-in-out alternate infinite; -moz-animation: anim1 2s ease-in-out alternate infinite; -webkit-animation: anim1 2s ease-in-out alternate infinite; }

Hola mundo

El resultado de la animacin anterior es el que vemos a la derecha, Este es un ejemplo bastante simple, sin embargo con un poco de paciencia se pueden conseguiir animaciones como la de la siguiente pgina de ejemplo: Los planetas En esta pgina el movimiento de los planetas se consigue mediante una rotacin, y un cambio en el origen de la rotacin con la propiedad transform-origin. Otro truco bastante empleado es la propiedad border-radius: 50%, que convierte un elemento cuadrado en redondo. El cdigo del ejemplo anterior puedes verlo en la siguiente pgina: Cdigo de "Los planetas"

En la siguiente pgina mostraremos las transformaciones en tres dimensiones. Transform 3D