Flip Animation Effect Using CSS3
post link : http://www.skptricks.com/2018/01/flip-animation-effect-using-css3.html

This Post Explain how to create Flip Animation effect using CSS3. Here we are using CSS keyframe attribute to perform flip animation effect horizontally and vertically to small square div box. All the animation effect is controlled Keyframes Rule and it provides very smooth animation effect.




Keyframe Animation :
Here we are using below CSS Style to perform flip animation effect horizontally and vertically to small square div box.
@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;
}
}

post link : http://www.skptricks.com/2018/01/flip-animation-effect-using-css3.html


https://www.youtube.com/watch?v=8OYyvpr6zg8