DEV Community

skptricks
skptricks

Posted on

Flip Animation effect using CSS3

Post Link : Flip Animation effect using CSS3

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 by 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;
}
}

Download code : https://github.com/skptricks/php-Tutorials/tree/master/Flip%20Animation%20effect%20using%20CSS3

Discussion (0)