Appearance
How to Flip Text with CSS
CSS3 allows adding various effects, including text flipping due to transformation functions. You can flip a text without any JavaScript code.
The flipping effect creates a mirror image of an element. You can flip an element both horizontally and vertically.
In this snippet, we’re going to show some examples of flipping a text using only CSS.
Create HTML
- Use the
<span>element with the class name “flipH” and add content.
How to Flip Text with CSS
html
<span class="flipH">W3Docs ▹</span>Add CSS
- Specify the display and margin properties for the
<span>. - Use the transform property to set a horizontal flip. The
scale(-1, 1)function flips the element horizontally by multiplying the X-axis coordinates by -1. - Add color.
How to Flip Text with CSS
css
span {
display: inline-block;
margin: 40px;
}
.flipH {
transform: scale(-1, 1);
color: #1c87c9;
}Here is the full example.
Example of flipping a text horizontally:
Example of flipping a text horizontally:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
display: inline-block;
margin: 40px;
}
.flipH {
transform: scale(-1, 1);
color: #1c87c9;
}
</style>
</head>
<body>
<span>W3Docs ▹</span>
<span class="flipH">W3Docs ▹</span>
</body>
</html>Result
W3Docs ▹ W3Docs ▹
Example of flipping a text vertically:
Example of flipping a text vertically:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
display: inline-block;
margin: 40px;
}
.flipV {
transform: scale(1, -1);
color: #8ebf42;
}
</style>
</head>
<body>
<span class="flipV">W3Docs ▹</span>
</body>
</html>Example of flipping a text upside down:
Example of flipping a text upside down:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container:hover .backwards {
margin: 15px;
transform: scale(1, 1);
}
.space {
padding-left: 50px;
}
.container:hover .space {
padding-right: 50px;
padding-left: 0;
}
.backwards {
display: inline;
font-size: 100px;
font-weight: bold;
transition: all .9s;
transform: scale(-1, -1);
}
</style>
</head>
<body>
<ul class="container">
<li class="backwards">W</li>
<li class="backwards">3</li>
<li class="backwards">D</li>
<li class="backwards">O</li>
<li class="backwards">C</li>
<li class="backwards">S</li>
</ul>
</body>
</html>Example of a text reflection effect:
Example of mirroring a text:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #000000;
display: flex;
justify-content: center;
}
.main {
display: inline-flex;
}
.box {
margin-top: 50px;
font-size: 5em;
padding: 20px;
color: white;
font-weight: 800;
}
#box1::after {
content: "W3Docs";
display: flex;
transform: rotateX(180deg);
background-image: linear-gradient(180deg, rgba(255, 255, 255, .0) 10%, rgba(255, 255, 255, .5));
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<div class="main">
<div class="box" id="box1">W3Docs</div>
</div>
</body>
</html>