Vertical Flip Animation Using CSS

Vertical Flip Animation Using CSS

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.

Tags