How to Skew Text on Hover using HTML and CSS?

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
<!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:
CSS-Basics
HTML-Basics
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property