Entendido.

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

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++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

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

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

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;
      -webkit-transition: all 2s;	
      }
#D1:hover { 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);		
        }

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;
    -webkit-transition: all 1s;
				
    transform:rotate(-15deg) skewY(-30deg);
    -webkit-transform:rotate(-15deg) skewY(-30deg);
    -o-transform:rotate(-15deg) skewY(-30deg);
    }
#D2:hover { transform:rotate(15deg) skewY(30deg); 
      -webkit-transform:rotate(15deg) skewY(30deg);
      -o-transform:rotate(15deg) skewY(30deg);
      }

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) ;-o-transform: scaleX(1) rotate(-15deg) ; }
   to { transform: scaleX(-1) rotate(15deg);  -o-transform: scaleX(-1) rotate(15deg);}
}
@-webkit-keyframes anim1 {  
   from { -webkit-transform: scaleX(1) rotate(-15deg) ; }
   to { -webkit-transform: scaleX(-1) rotate(15deg);  }
}

La compatibilidad con navegadores ns obliga a repetir los códigos para que funcione en todos ellos con las formas experimentales.

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;
     -webkit-animation: anim1 2s ease-in-out alternate infinite;
     }

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 conseguir 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

Página creada por ANYELGUTI.

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

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

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