Cómo hacer un cambio constante en CSS3
/*?css3?Código de muestra para hacer que una imagen se voltee continuamente?*/
#gavinPlay{
/*?background:color?url?x ? ¿Repetir? La imagen proviene de Baidu Pictures, ¿reemplácela según sea necesario?*/
background:red?url("/6ONXsjip0QIZ8tyhnq/it/u=2406548182,3889596045&fm=80")?center? no-repeat;
/*?background-size:auto?auto?||?cover?Representa llenar el fondo del elemento con ancho o alto?*/
background-size: cover;
p>/*?Establezca los valores de ancho y alto de forma arbitraria y pruebe?*/
width:200px;
height: 200px;
/*? ¿Establecer el estilo predeterminado y habilitar la aceleración de hardware 3D?*/
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0, 0);
transform:translate3d(0,0,0);
/*? ¿nombre? ¿Duración de la reproducción de la animación en segundos o microsegundos? Reproducción de la animación La curva de velocidad lineal es una velocidad constante y el número de veces de reproducción de la animación es infinito es la reproducción en bucle;?*/
-webkit-animation:play?3s ?linear?infinite;
-moz-animation: play?3s?linear?infinite;
animación:play?3s?linear?infinite;
}
@-webkit-keyframes?play{
0%{
/*
Volteado horizontal
*/
-webkit-transform:rotateY(0deg );
/*
Voltear verticalmente
-webkit-transform:rotateX (0deg);
Girar en el sentido de las agujas del reloj
-webkit-transform:rotate(0deg);
Girar en el sentido contrario a las agujas del reloj
-webkit-transform :rotate(0deg);
*/
}
¿100%?{
/*?Giro horizontal?*/
-webkit-transform:rotateY(360deg) ;
/*?Giro vertical
-webkit-transform:rotateX(360deg);
Girar en el sentido de las agujas del reloj
-webkit- transform:rotate(360deg);
Girar en el sentido contrario a las agujas del reloj
-webkit-transform:rotate(-360deg);
*/
}
}
@-moz-keyframes?play{
0%{
-moz-transform:rotateY(0deg);
/*
-moz-transform:rotateX(0deg);
-moz -
transformar: rotar (0 grados);
-moz-transform: rotar (0 grados);
*/
}
100% ?{
-moz-transform:rotateY(360deg);
/*
-moz-transform:rotateX(360deg);
-moz-transform:rotate(360deg);
-moz-transform:rotate(-360deg);
*/
}
}
@keyframes?play{
0%{
transform:rotateY(0deg);
/*
transformar:rotateX(0deg);
transformar:rotate(0deg);
transformar:rotate(0deg);
* /
}
¿100%?{
transformar:rotarY(360deg);
/*
transformar:rotarX(360deg);
transformar:rotar(360deg);
transformar:rotar(-360deg);
*/
}
}