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
<!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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...