Flip the text using CSS
Last Updated :
15 May, 2023
The Flipping effect creates a mirror image of the text. You can flip your text both horizontally and vertically. CSS3 allows adding various effects, including text flipping due to its transformation functions. You can flip a text without any JavaScript code.
Given below is the example of flipping the text without using JavaScript it includes only HTML and CSS.
There are various types of text flipping:
- Horizontal Flip
- Vertical Flip
- Upside Down Flip
- Mirror Image of text
Follow the steps:
- Create HTML file: Use <span> element with class name “abc” (as your choice).
- Create CSS file:
- Specify the Display and Margin properties of <span>.
- Use the transform properties to set the flip you required ( like vertical text flip, Horizontal text flip, Upside down text flip, or Mirroring of text )
- Add the color if you want that your flip text should have a different color.
The below examples illustrate the approach:
Example 1: HTML CSS code to flip the Text Horizontally
HTML
<!DOCTYPE html>
< html >
< head >
< title > Title you want </ title >
< style >
span {
display: Inline-block;
margin: 50px;
}
.GFG {
transform: scale(-1, 1);
color: #000080;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
</ style >
</ head >
< body >
< span >GeeksforGeeks</ span >
< span class = "GFG" >GeeksforGeeks</ span >
</ body >
</ html >
|
Output:
Flip text horizontally
Example 2: HTML CSS code to flip the text upside-down.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Title as you want</ title >
< style >
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.backwards {
display: inline;
font-size: 100px;
font-style: bold;
-moz-transform: scale(-1, -1);
-webkit-transform: scale(-1, -1);
-o-transform: scale(-1, -1);
-ms-transform: scale(-1, -1);
transform: scale(-1, -1);
}
</ style >
</ head >
< body >
< ul class = "container" >
< li class = "backwards" >G</ li >
< li class = "backwards" >e</ li >
< li class = "backwards" >e</ li >
< li class = "backwards" >k</ li >
< li class = "backwards" >S</ li >
</ ul >
</ body >
</ html >
|
Output:
Flip upside-down
Example 3: HTML CSS code to flip the text vertically.
HTML
<!DOCTYPE html>
< html >
< head >
< title > Title you want </ title >
< style >
span {
display: Inline-block;
margin: 50px;
}
.GFG {
transform: scale(1, -1);
color: #000080;
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}
</ style >
</ head >
< body >
< span >GeeksforGeeks</ span >
< span class = "GFG" >GeeksforGeeks</ span >
</ body >
</ html >
|
Output:
flip text vertically
Example 4: HTML and CSS code for mirroring the text.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Title as you want </ title >
< style >
body {
display: flex;
justify-content: center;
}
.main {
display: inline-flex;
}
.box {
margin-top: 100px;
font-size: 5em;
color: #000;
font-weight: 900;
}
#box1::after {
content: "GeeksforGeeks";
display: flex;
transform: rotateX(180deg);
-webkit-background-clip: text;
color: #ddd;
}
</ style >
</ head >
< body >
< div class = "main" >
< div class = "box" id = "box1" >GeeksforGeeks</ div >
</ div >
</ body >
</ html >
|
Output:
mirroring the text
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...