In this tutorial we will see how to create Vertical Flip Animation Using CSS. This vertical flip animation is created using transform property of CSS.
Table of Contents
HTML Code
HTML Code is given below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Flip Animation Using CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="flip">How To Code School</h1>
</body>
</html>
CSS Code
CSS Code is given below.
.flip{
font-size:30px;
padding: 20px;
font-weight:bold;
color: #fff;
background-color:#22438C;
cursor:pointer;
}
.flip:hover{
animation: flip 1s linear;
}
@keyframes flip{
from{
transform: rotateX(0deg);
}
to{
transform: rotateX(360deg);
}
}
Video Tutorial
Watch video tutorial on how to create Vertical Flip Animation Using CSS.
Post a Comment