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
Top comments (0)