Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Animacion en CSS3

Realizar animaciones en la página es muy fácil con CSS3


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 127

Visitas el mes pasado: 176

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Introduccion a las animaciones
Desarrollo Web
animations CSS
W3CScools
CSS3 Transitions
W3CScools
CSS Animations Module Level 3
W3C Working Draft 20 March 2009
CSS Transitions Module Level 3
W3C Working Draft 01 December 2009
CSS 2D Transforms Module Level 3
W3C Working Draft 01 December 2009
CSS 3D Transforms Module Level 3
W3C Working Draft 20 March 2009
Uso de CSS transforms
mozilla: centro de documentación.
Curva de Bézier
Wikipedia.
Coordinate Transformation Matrices
Math is amazingy powerful
IE's CSS3 Transforms Translator
User Agent Man

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Animación en CSS3 (V)

La propiedad transform

imagen css3_anim

Concepto de transformación.

La transformacion en CSS3 es un efecto que permite a un elemento cambiar de forma, tamaño o posición.

La transformación en si no es ninguna animación, sino que simplemente se muestra el elemento cambiado, sin embargo las transformaciones pueden utilizarse en animaciones y transiciones, de manera que vemos cómo el elemento cambia de forma, tamaño o posición.

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 propiedad transform, la cual tiene como valor diversos métodos.

transform: <metodo>+;

El método actúa como una función interna. La forma de escribir un método es igual que una llamada a una función, tal como hacemos en javascript o php.

transform: metodo(a,b);

donde metodo es siempre una palabra clave y a,b son los parámetros o argumentos que le pasamos al método. Veamos los distintos métodos de la propiedad transform.

NAVEGADORES : Hasta hace poco tiempo esta propiedad sólo funcionaba en los navegadores de forma experimental. Hoy en dia (marzo 2014) Firefox y Internet Explorer 10 han adoptado ya la forma estándar. Para Chrome y Safari debemos usar el prefijo -webkit- y para Ópera el prefijo -o- . Internet Explorer 9 admite también la propiedad con el pefijo -ms-.

Nosotros aquí repetiremos la propiedad con los prefijos -webkit- (Chrome y Safari) y -o- (Ópera), para poder verlo en los principales navegadores si están actualizados.


El método translate

El método translate cambia de posición el elemento (traslación), moviendolo hacia donde indican los parámetros.

transform: translate(30px,5px);

Dentro del paréntesis pondremos dos parámetros, el primero es la traslación que se produce en horizontal, hacia la derecha, (eje X), y el segundo la traslación en vertical, hacia abajo (eje Y).

Los parámetros deben ser siempre medidas de longitud, si su valor es negativo el elemento se desplazara hacia la izquierda (primer parámetro) o hacia arriba (segundo parámetro).

Veamos el seguiente ejemplo, le aplicamos a un elemento el siguiente código:

#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 posición original. Mostramos aquí cual era la posición original y cual la que toma tras la traslación. En realidad el código que hemos utilizado es algo más largo debido a que debemos compatibilizarlo con los diferentes navegadores:


#capa1 { transform: translate(150px,20px); /*W3C*/
         -webkit-transform: translate(150px,20px); /*Safari y Chrome*/
         -o-transform: translate(150px,20px); /*Opera*/
        }


Los métodos translateX y translateY

Los métodos tanslateX y translateY desplazan también el elemento de su posición original, funcionan igual que el método translate pero sólo en una dirección, por eso sólo tienen un parámetro:

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 método rotate

El método rotate gira el elemento respecto a su posición original, el ángulo de giro viene indicado en el parámetro:

transform: rotate(30deg);

El ángulo de rotación indicado en el parámetro puede indicarse en grados (deg) o en radianes (rad), veamos un ejemplo:

#capa2 {transform: rotate(30deg);}

El resultado de aplicar este código a un div id="capa2" lo vemos a la derecha.

Elemento original
transform: rotate (30deg)

En color más 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 métodos anteriores, la propiedad transform debemos repetirla con el prefijo de los distintos navegadores, para que se pueda ver.


El método scale

El método scale aumenta o reduce de tamaño 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 parámetros son números que indican la proporción en la que se debe aumentar o reducir. los decimales menores que 1 reducen el tamaño.

transform: scale(1.2,0.8);

Este método utiliza dos parámetros, que son dos números, el primer número indica indica la proporción 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 método a un div id="capa3" es el que vemos a la derecha.

Como en los métodos anteriores hemos puesto debajo el elemento original. Como en los casos anteriores, en el código real debemos repetir la propiedad transform con los prefijos de los distintos navegadores.


Los métodos scaleX y scaleY.

Descomponen el método anterior para los dos ejes del plano. Cada uno de estos métodos controla el escalamiento del elemento en un eje del plano, por eso sólo llevan un parámetro:

transform: scaleX(1.2);

el método scaleX aumenta o disminuye el tamaño en el eje X u horizontal.

transform: scaleY(0.8);

el método scaleX aumenta o disminuye el tamaño en el eje Y o vertical.


El método skew.

El método 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 parámetro indica la inclinación de los lados verticales, y el segundo el de los lados horizontales. Los parámetros 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 método a un div id="capa4" es el que vemos a la derecha.

Como siempre en color más claro hemos puesto debajo el elemento original. El código debemos repetirlo para los distintos navegadores con los prefijos de cada uno de ellos.


Los métodos skewX y skewY

Descomponen el método anterior en sus dos componentes. skewX inclina sólo los lados verticales, mientras que skewY inclina sólo los lados horizontales, es por eso que sólo tienen un parámetro:

transform: skewX(10deg);

Los lados verticales se inclinan 10 grados, y los horizontales se quedan en la misma línea.

transform: skewY(15deg);

Los lados horizontales se inclinan 15 grados, y los verticales se quedan en la misma línea.


El método matrix.

El método matrix combina todos los métodos anteriores. Utiliza 6 parámetros que se obtienen transformando las cordenadas de los vértices en una matriz. La fórmula es algo complicada para el que no entiende de matemáticas avanzadas. y podemos verla en Math is amazingly powerful / 8.5. Coordinate Transformation Matrices. Un ejemplo sería 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 daría el resultado que vemos a la derecha.

Como siempre debemos repetir el código para los distintos navegadores que no usan la forma estándar.

Una ayuda para usar este método la tenemos en la página www.useragentman.com/matrix/ donde podemos ver como queda la transformación con diferentes parámetros.


Usar varios métodos

Si el uso del método matrix nos parece complicado, siempre podemos utilizar varios métodos 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. Después de transform: podemos poner tantos métodos como queramos, el resultado será el de añadir 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 clave left | 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 próxima página veremos cómo hacer que las transformaciones puedan verse también en Internet Explorer 8.

Transformaciones En Internet Explorer.



Animación CSS3

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com