Horizontal Flip Animation Using CSS

Horizontal Flip Animation Using CSS

Today we will see how to create Horizontal Flip Animation Using CSS. This Horizontal 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>Horizontal 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: rotateY(0deg);
  }
   to{
     transform: rotateY(360deg);
  }
}

Video Tutorial

Watch video tutorial on how to create Horizontal Flip Animation Using CSS.

Tags