Skip to content
Related Articles

Related Articles

Improve Article

How to Skew Text on Hover using HTML and CSS?

  • Last Updated : 15 Jul, 2020
Geek Week

Skewed text animation effect can be created using HTML and CSS, this animation looks very cool and can be used in websites to make them look more dynamic, the following sections will guide on how to create the desired animation effect.

First Section: In this section we will create a basic div tag which consists of various span tags inside of it.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  <title>Skew Text</title>
</head>
<body>
  <div>
    <span>G</span>
    <span>E</span>
    <span>E</span>
    <span>K</span>
    <span>S</span>
    <span>F</span>
    <span>O</span>
    <span>R</span>
    <span>G</span>
    <span>E</span>
    <span>E</span>
    <span>K</span>
    <span>S</span>
      
  </div>
</body>
</html>

Second Section: In this section we will first design the span tags using basic CSS properties further we will use the nth-child() selector to select the element’s children and use the skewY() property to produce the desired effect on hover.

CSS Code:



CSS




<style>
  *{
    margin: 0;
    padding: 0;
   }
   
   div{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: flex;
     align-items: center;
   }
   span{
     height: 40px;
     width: 40px;
     margin-right: -2px;
     background-color: green;
     text-align: center;
     font-size: 2em;
   }
   div:hover span:nth-child(odd){
     transform: skewY(-15deg);
   }
   div:hover span:nth-child(even){
     transform: skewY(15deg);
   }  
   
 </style>

Final Code: It is the combination of the above two code sections

HTML




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  <title>Skew Text</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
   }
   
   div{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: flex;
     align-items: center;
   }
   span{
     height: 40px;
     width: 40px;
     margin-right: -2px;
     background-color: green;
     text-align: center;
     font-size: 2em;
   }
   div:hover span:nth-child(odd){
     transform: skewY(-15deg);
   }
   div:hover span:nth-child(even){
     transform: skewY(15deg);
   }  
   
 </style>
  
<body>
  <div>
    <span>G</span>
    <span>E</span>
    <span>E</span>
    <span>K</span>
    <span>S</span>
    <span>F</span>
    <span>O</span>
    <span>R</span>
    <span>G</span>
    <span>E</span>
    <span>E</span>
    <span>K</span>
    <span>S</span>
      
  </div>
</body>
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :