Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Skew Text on Hover using HTML and CSS?

  • Last Updated : 15 Jul, 2020

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.

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

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!