All the animation effect is controlled by

and it provides very smooth animation effect.









Keyframe Animation :

Here we are using below CSS Style to p

@keyframes rotate - div { 0 % { transform : perspective ( 120px ) rotateX ( 0deg ) rotateY ( 0deg ); - webkit - transform : perspective ( 120px ) rotateX ( 0deg ) rotateY ( 0deg ); } 50 % { transform : perspective ( 120px ) rotateX (- 180.1deg ) rotateY ( 0deg ); - webkit - transform : perspective ( 120px ) rotateX (- 180.1deg ) rotateY ( 0deg ); } 100 % { transform : perspective ( 120px ) rotateX (- 180deg ) rotateY (- 179.9deg ); - webkit - transform : perspective ( 120px ) rotateX (- 180deg ) rotateY (- 179.9deg ); background - color : #ec407a; } }

<html> <head> <style> . spinner { width : 100px ; height : 100px ; background - color : #42a5f5; margin : 100px auto ; - webkit - animation : rotate - div 1.2s infinite ease - in - out ; animation : rotate - div 1.2s infinite ease - in - out ; } @keyframes rotate - div { 0 % { transform : perspective ( 120px ) rotateX ( 0deg ) rotateY ( 0deg ); - webkit - transform : perspective ( 120px ) rotateX ( 0deg ) rotateY ( 0deg ); } 50 % { transform : perspective ( 120px ) rotateX (- 180.1deg ) rotateY ( 0deg ); - webkit - transform : perspective ( 120px ) rotateX (- 180.1deg ) rotateY ( 0deg ); } 100 % { transform : perspective ( 120px ) rotateX (- 180deg ) rotateY (- 179.9deg ); - webkit - transform : perspective ( 120px ) rotateX (- 180deg ) rotateY (- 179.9deg ); background - color : #ec407a; } } </style> </head> <body> <div class = "spinner" ></div> </body> </html>

This Post Explain. Here we are usingto perform flip animation effect horizontally and vertically to small square div box.erform flip animation effect horizontally and vertically to small square div box.Lets see the complete source code to performYou can use this animation effect during the ajax calls.This is all about CSS3 flip animation effect. in case you have any queries, please do comment in below comment box.