Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Flip the Text Using CSS
To flip the text using CSS, we will be using CSS transform property. Flipping is a technique that transforms or mirrors an element on particular axis (horizontal or vertical). We will be understanding three different approaches to fip the text using CSS.
In this article, we are having some textual content written using span tag. Our task is to flip the text using CSS.
Approaches to Flip the Text using CSS
Here is a list of approaches to flip the text using CSS which we will be discussing in this article with stepwise explaination and complete example codes.
- Horizontal Text Flip using scaleX Function
- Vertical Text Flip using scaleY Function
- Mirroring the Text using rotateX Function
Horizontal Text Flip using scaleX Function
To horizontally flip the text using CSS, we will be using CSS scaleX() function which resizes an element along the horizontal axis. If we pass -1 as an argument in the scale function, the element will be flipped.
- We have used span tag to write the textual content, which is wrapped inside a div element which centers the textual content.
- We have used span as an element selector which applies padding and sets the font-size of the text.
- To center the div, we have used display and flex properties such as justify-content for centering horizontally, align-items to center the button vertically and set the div height.
- We have used "transform: scaleX(-1);" inside flipHorizontal class which horizontally flips the text.
Example
Here is a complete example code implementing above mentioned steps to horizontally flip the text using scaleX() function.
<!DOCTYPE html>
<html>
<head>
<title>
Horizontal Text Flip using CSS
</title>
<style>
span {
padding: 30px;
font-size: 18px;
}
div {
display: flex;
justify-content: center;
height: 50vh;
align-items: center;
}
.flipHorizontal {
display: inline-block;
transform: scaleX(-1);
color: #04af2f;
}
</style>
</head>
<body>
<h3>
Flipping the text using CSS
</h3>
<p>
In this example we have used <strong>scaleX
</strong> function to flip the text horizontally
using CSS.
</p>
<div>
<strong>
<span>
Tutorialspoint
</span>
</strong>
<strong>
<span class="flipHorizontal">
Tutorialspoint
</span>
</strong>
</div>
</body>
</html>
Vertical Text Flip using scaleY Function
In this approach to vertically flip the text using CSS, we will be using CSS scaleY() function which resizes an element along the vertical axis. If we pass -1 as an argument in the scale function, the element will be flipped.
- We have used same process for writing and placing the textual content at the center as approach first.
- Then we have used "transform: scaleY(-1);" inside flipVertical class which vertically flips the text.
Example
Here is a complete example code implementing above mentioned steps to vertically flip the text using scaleY() function.
<!DOCTYPE html>
<html>
<head>
<title>
Horizontal Text Flip using CSS
</title>
<style>
span {
padding: 30px;
font-size: 18px;
}
div {
display: flex;
justify-content: center;
height: 50vh;
align-items: center;
}
.flipVertical {
display: inline-block;
transform: scaleY(-1);
color: #04af2f;
}
</style>
</head>
<body>
<h3>
Flipping the text using CSS
</h3>
<p>
In this example we have used <strong>scaleY
</strong> function to flip the text
using CSS.
</p>
<div>
<strong>
<span>
Tutorialspoint
</span>
</strong>
<strong>
<span class="flipVertical">
Tutorialspoint
</span>
</strong>
</div>
</body>
</html>
Mirroring the Text using rotateX Function
To mirror the text using CSS, we will be using CSS rotateX() function which rotates an element around it's horizontal axis.
- We have used span and h1 tag to to write the textual content.
- Then, we have used "transform: rotateX(180deg);" inside mirror class which mirrors the text.
Example
Here is a complete example code implementing above mentioned steps to mirror the text using rotateX() function.
<!DOCTYPE html>
<html>
<head>
<title>
Mirroring the Text using CSS
</title>
<style>
.mirror {
display: inline-block;
transform: rotateX(180deg);
color: #04af2f;
}
</style>
</head>
<body>
<h3>
Mirroring the text using CSS
</h3>
<p>
In this example we have used <strong>rotateX
</strong> function to mirror the text
using CSS.
</p>
<h1>
<span>Tutorialspoint</span>
</h1>
<h1>
<span class="mirror">Tutorialspoint</span>
</h1>
</body>
</html>
Conclusion
In this article, we understood how to change the position of a scrollbar using CSS. We have discussed three different approaches which are: by using scaleX, scaleY and rotateX function of CSS transform property.
4K+ Views
