La animación de CSS no funciona

usando la perspectiva de CSS3, me gustaría hacer una animación de volteo. Aquí está mi código:

HTML:

Title

CSS:

 header div#h1{ width: 150px; perspective: 150px; -webkit-perspective:150px; } header div#h1 h1{ position: absolute; animation: flip 5s infinite; } @keyframes flip{ 0%{ transform: rotate(0); -webkit-transform: rotate(0); } 25%{ transform: rotateX(45deg); -webkit-transform: rotateX(45deg); } 50%{ transform: rotateX(90deg); -webkit-transform: rotateX(120deg); } 75%{ transform: rotateX(120deg); -webkit-transform: rotateX(120deg); } 100%{ transform: rotateX(180); -webkit-transform: rotateX(180); } } /* -webkit- keyframes */ 

VIOLÍN

Parece que esta animación debería funcionar, pero no es así.

¿Por qué esto no funciona?

Gracias.

Agregué algunos prefijos. Por favor revisa este violín.

Violín

CSS

 header div#h1 h1{ position: absolute; -webkit-animation: flip 5s infinite; /* Safari 4+ */ -moz-animation: flip 5s infinite; /* Fx 5+ */ -o-animation: flip 5s infinite; /* Opera 12+ */ animation: flip 5s infinite; /* IE 10+ */ } 

Solo un ejemplo de demostración http://jsfiddle.net/6zF4X/2/

No estaba volteando todo el camino desde que tu último valor fue 180deg en vez de 360deg. Ajusté algunos de los otros grados, pero debes ajustar los grados de la forma que quieras. Solo asegúrese de que el primero sea 0 y el último sea 360. Además, es una buena práctica usar los mismos tipos de valor en toda la animación. Así que utilicé rotateX (0) para el 0% en lugar de rotar (0) como lo hacía antes.

Cambié algunas otras cosas en el violín, así que no uses ese violín exactamente. Simplemente cambie los grados de rotación de forma acordonada y funcionará.

 @keyframes flip{ 0%{ transform: rotateX(0); } 25%{ transform: rotateX(80deg); } 50%{ transform: rotateX(160deg); } 75%{ transform: rotateX(280deg); } 100%{ transform: rotateX(360deg); } }