Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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 flip the text using CSS.
Syntax
selector {
transform: scaleX(-1); /* Horizontal flip */
transform: scaleY(-1); /* Vertical flip */
transform: rotateX(180deg); /* Mirror effect */
}
Method 1: 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 ?
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
gap: 20px;
}
.text {
padding: 20px;
font-size: 24px;
font-weight: bold;
color: #04af2f;
border: 2px solid #ccc;
}
.flip-horizontal {
transform: scaleX(-1);
}
</style>
</head>
<body>
<h3>Horizontal Text Flip using scaleX Function</h3>
<div class="container">
<span class="text">Original</span>
<span class="text flip-horizontal">Original</span>
</div>
</body>
</html>
Two text boxes appear side by side. The left box shows "Original" in normal orientation, while the right box shows the same text flipped horizontally (mirrored left to right).
Method 2: Vertical Text Flip using scaleY Function
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, the element will be flipped vertically ?
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
gap: 20px;
}
.text {
padding: 20px;
font-size: 24px;
font-weight: bold;
color: #04af2f;
border: 2px solid #ccc;
}
.flip-vertical {
transform: scaleY(-1);
}
</style>
</head>
<body>
<h3>Vertical Text Flip using scaleY Function</h3>
<div class="container">
<span class="text">Original</span>
<span class="text flip-vertical">Original</span>
</div>
</body>
</html>
Two text boxes appear side by side. The left box shows "Original" in normal orientation, while the right box shows the same text flipped vertically (upside down).
Method 3: Mirroring the Text using rotateX Function
To mirror the text using CSS, we will be using CSS rotateX() function which rotates an element around its horizontal axis. Using 180 degrees creates a mirror effect ?
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
gap: 20px;
}
.text {
padding: 20px;
font-size: 24px;
font-weight: bold;
color: #04af2f;
border: 2px solid #ccc;
}
.mirror {
transform: rotateX(180deg);
}
</style>
</head>
<body>
<h3>Mirroring Text using rotateX Function</h3>
<div class="container">
<span class="text">Original</span>
<span class="text mirror">Original</span>
</div>
</body>
</html>
Two text boxes appear side by side. The left box shows "Original" in normal orientation, while the right box shows the same text rotated 180 degrees around the horizontal axis, creating a mirror effect.
Conclusion
In this article, we learned how to flip text using CSS transform property. We explored three different approaches: scaleX(-1) for horizontal flipping, scaleY(-1) for vertical flipping, and rotateX(180deg) for mirroring effects. These techniques are useful for creating visual effects and animations.
5K+ Views
