Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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
Flipping is a technique that can transform or mirror an element on a particular axis (horizontal or vertical). We can flip the text using CSS instead of using JavaScript. There are various ways to flip a text, some of them are listed as follows −
Horizontal text flip
Vertical text flip
Mirroring the text
Following is the approach to perform a flip −
Step 1 − Create an HTML file and use the <span> element with some class name “XYZ” to add the text.
Step 2 − Now, add CSS to specify the display and margin properties for <span> tag.
Step 3 − Then use the transform property with scale() function to set the type of flip you want.
CSS ScaleX() Function
The ScaleX() function can be used along with the transform property to resize an element along the horizontal (X) axis. It accepts a single argument, if we pass 1, the element remains same and resizing will not happen. If we pass 2 and so on, the element will increase its size along the horizontal axis. If we pass -1, the element will be flipped.
Example
In the following example, we are performing a horizontal flip using the transform property with scaleX() function −
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Flip Text using CSS</title>
<style type="text/css">
.flipHorizontal {
display: inline-block;
transform: scaleX(-1);
color: green;
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
}
div {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
h3 {
padding: 50px;
}
</style>
</head>
<body>
<div>
<h3>
<span>Welcome to tutorialspoint</span>
</h3>
<h3>
<span class="flipHorizontal">Welcome to tutorialspoint</span>
</h3>
</div>
</body>
</html>
CSS ScaleY() Function
The ScaleY() function can be used along with transform property to resize an element along the vertical (Y) axis.
It accepts a single argument, if we pass 1, element remains same and resizing will not happen. If we pass 2 and so on, the element will increase its size along vertical axis. If we pass -1, the element will be flipped.
Example
In the following example, we are performing a vertical flip using the transform property with scaleY() function −
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Flip Text using CSS</title>
<style type="text/css">
.flipVertical {
display: inline-block;
transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
color: green;
}
div {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
h3 {
padding: 50px;
}
</style>
</head>
<body>
<div>
<h3>
<span>Welcome to tutorialspoint</span>
</h3>
<h3>
<span class="flipVertical">Welcome to tutorialspoint</span>
</h3>
</div>
</body>
</html>
CSS RotateX() Function
The RotateX() function can be used along with transform property to rotate an element around it’s horizontal (X) axis. This function accepts only a single parameter that specifies the angle of rotation in degrees.
If we pass a positive value, the element will rotate clockwise. if a negative value is passed, the element will rotate anti-clockwise.
Example
Here, we are mirroring a text using the transform property with rotateX() function −
<!DOCTYPE html>
<html>
<head>
<title>Mirror Text using CSS</title>
<style type="text/css">
.mirror {
display: inline-block;
transform: rotateX(180deg);
}
</style>
</head>
<body>
<h1>
<span>Tutorialspoint</span>
</h1>
<h1>
<span class="mirror">Tutorialspoint</span>
</h1>
</body>
</html>
1K+ Views
