DEV Community

loading...

Flip Animation effect using CSS3

skptricks profile image skptricks ・1 min read

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)

pic
Editor guide