Skip to content
Related Articles

Related Articles

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.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


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

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :