El efecto Flipping crea la imagen especular del texto. Puede voltear su texto tanto horizontal como verticalmente. CSS3 permite agregar varios efectos, incluido el cambio de texto debido a sus funciones de transformación. Puede voltear un texto sin ningún código JavaScript.
A continuación se muestra el ejemplo de cómo voltear el texto sin usar JavaScript, solo incluye HTML y CSS.
Hay varios tipos de volteo de texto:
- Volteo horizontal
- Volteo vertical
- Voltear al revés
- Imagen espejo del texto
Sigue los pasos:
- Cree un archivo HTML:
utilice el elemento <span> con el nombre de clase «abc» (según su elección). - Crear archivo CSS:
- Especifique las propiedades de visualización y margen de <span>.
- Use las propiedades de transformación para configurar el volteo que necesita (como volteo de texto vertical, volteo de texto horizontal, volteo de texto al revés, reflejo de texto)
- Agregue el color si desea que su texto de giro tenga un color diferente.
Los siguientes ejemplos ilustran el enfoque:
Ejemplo 1: código HTML CSS para voltear el texto horizontalmente
HTML
<!DOCTYPE html>
<html>
<head>
<title> Title you want </title>
<style>
span{
display: Inline-block;
margin: 50px;
}
.GFG{
transform: scale(-1, 1);
color: #000080;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
</style>
</head>
<body>
<!-- here write your text you want to flip -->
<span>GeeksforGeeks</span>
<!-- your class name must be as you
above written with .class name -->
<span class="GFG">GeeksforGeeks</span>
</body>
</html>
Producción:
Voltear texto horizontalmente
Ejemplo 2: código HTML CSS para voltear el texto al revés.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Title as you want</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.backwards {
display: inline;
font-size: 100px;
font-style: bold;
-moz-transform: scale(-1, -1);
-webkit-transform: scale(-1, -1);
-o-transform: scale(-1, -1);
-ms-transform: scale(-1, -1);
transform: scale(-1, -1);
}
</style>
</head>
<body>
<ul class="container">
<li class="backwards">G</li>
<li class="backwards">e</li>
<li class="backwards">e</li>
<li class="backwards">k</li>
<li class="backwards">S</li>
</ul>
</body>
</html>
Salida :
Dar la vuelta al revés
Ejemplo 3: código HTML CSS para voltear el texto verticalmente.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Title you want </title>
<!-- write your title between title tag -->
<style>
span {
display: Inline-block;
margin: 50px;
}
.GFG {
transform: scale(1, -1);
color: #000080;
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}
</style>
</head>
<body>
<span>GeeksforGeeks</span>
<!-- here write your text you want to flip -->
<span class="GFG">GeeksforGeeks</span>
<!-- your class name must be as you above written with .class name -->
</body>
</html>
Producción:
voltear el texto verticalmente
Ejemplo 4:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Title as you want </title>
<style>
body {
display: flex;
justify-content: center;
}
.main {
display: inline-flex;
}
.box {
margin-top: 100px;
font-size: 5em;
color: #000;
font-weight: 900;
}
#box1::after {
content: "GeeksforGeeks";
display: flex;
transform: rotateX(180deg);
-webkit-background-clip: text;
color: #ddd;
}
</style>
</head>
<body>
<div class="main">
<div class="box" id="box1">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
reflejando el texto