Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

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 página cambian de aspecto. la forma más fácil es meterlos dentro de una transición con la pseudoclase hover:. El mecanismo es el mismo que vimos en la página Transiciones. Veamos algunos ejemplos:

A un <div=id="D1">Hola mundo </div> le aplicamos el siguiente código CSS:

#D1 { width:100px; height: 100px; background: red;
      border: 2px solid blue; border-radius: 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 ratón por encima el elemento se transforma.

El código es el mismo que para cualquier transición con la pseudoclase :hover: en el elemento ponemos las propiedades de la transición, y dentro de la pseudoclase ponemos la transformación.

Veamos otro ejemplo con el siguiente <div=id="D2">Hola mundo </div>.

Su código 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 transformación, y cambiamos los valores de esa transformación en la pseudoclase hover.

Al pasar el ratón por encima el elemento cambia de forma pasando de la primera transformación a la segunda.

Animaciones

Hacer animaciones cambiando la propiedad transform consiste en pasar en la animación de unos valores en los métodos 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);  }
}

Después ponemos el código CSS para el elemento al que se le aplica, el cual debe tener las propiedades de animación:

#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 animación 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 página de ejemplo:

Los planetas

En esta página el movimiento de los planetas se consigue mediante una rotación, y un cambio en el origen de la rotación con la propiedad transform-origin. Otro truco bastante empleado es la propiedad border-radius: 50%, que convierte un elemento cuadrado en redondo. El código del ejemplo anterior puedes verlo en la siguiente página:

Código de "Los planetas"






En la siguiente página mostraremos las transformaciones en tres dimensiones. Transform 3D



Manual Animación CSS3

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo