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
Selected Reading
Create a mirror image with CSS
The CSS mirror effect can be created using the transform property with scale() function. By applying negative values to the scale function, you can flip elements horizontally or vertically to create mirror images.
Syntax
/* Horizontal mirror (flip left-right) */ transform: scaleX(-1); /* Vertical mirror (flip top-bottom) */ transform: scaleY(-1); /* Both horizontal and vertical mirror */ transform: scale(-1, -1);
Possible Values
| Function | Description |
|---|---|
scaleX(-1) |
Creates a horizontal mirror image (flips left to right) |
scaleY(-1) |
Creates a vertical mirror image (flips top to bottom) |
scale(-1, -1) |
Creates both horizontal and vertical mirror image |
Example 1: Horizontal Mirror Image
The following example creates a horizontal mirror effect using scaleX(-1) −
<!DOCTYPE html>
<html>
<head>
<style>
.original {
display: inline-block;
margin: 10px;
padding: 20px;
background-color: #3498db;
color: white;
font-size: 24px;
font-weight: bold;
}
.mirror-horizontal {
transform: scaleX(-1);
}
</style>
</head>
<body>
<div class="original">HELLO</div>
<div class="original mirror-horizontal">HELLO</div>
</body>
</html>
Two blue boxes appear side by side. The first shows "HELLO" normally, and the second shows "HELLO" mirrored horizontally (text appears backwards).
Example 2: Vertical Mirror Image
The following example creates a vertical mirror effect using scaleY(-1) −
<!DOCTYPE html>
<html>
<head>
<style>
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #e74c3c;
margin: 20px;
display: inline-block;
}
.mirror-vertical {
transform: scaleY(-1);
}
</style>
</head>
<body>
<div class="triangle"></div>
<div class="triangle mirror-vertical"></div>
</body>
</html>
Two red triangles appear side by side. The first triangle points upward, and the second triangle is flipped vertically to point downward.
Example 3: Complete Mirror Effect
The following example demonstrates both horizontal and vertical mirroring using scale(-1, -1) −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 80px;
height: 80px;
background: linear-gradient(45deg, #9b59b6, #3498db);
border-radius: 10px;
margin: 15px;
display: inline-block;
position: relative;
}
.box::before {
content: "A";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 32px;
font-weight: bold;
}
.complete-mirror {
transform: scale(-1, -1);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box complete-mirror"></div>
</body>
</html>
Two gradient boxes appear with the letter "A" in the center. The second box is completely mirrored both horizontally and vertically, showing the letter "A" upside down and backwards.
Conclusion
CSS mirror effects are easily achieved using the transform: scale() property with negative values. Use scaleX(-1) for horizontal mirroring, scaleY(-1) for vertical mirroring, or combine both for complete reflection effects.
Updated on: 2026-03-15T11:30:44+05:30
1K+ Views
Advertisements