使用CSS翻转文本

翻转是一种可以在特定轴上（水平或垂直）变换或镜像元素的技术。我们可以使用CSS而不是JavaScript来翻转文本。有多种翻转文本的方式，下面列举了其中一些：

水平文本翻转
垂直文本翻转
镜像文本

下面是执行翻转的步骤：

步骤1 - 创建一个HTML文件，并使用带有类名“XYZ”的元素添加文本。
步骤2 - 现在，添加CSS以指定标签的display和margin属性。
步骤3 - 然后使用transform属性和scale()函数来设置所需的翻转类型。

CSS ScaleX()函数

ScaleX()函数可与transform属性一起使用，沿水平（X）轴调整元素的大小。它接受一个参数，如果我们传递1，元素保持不变，大小不会改变。如果我们传递2等，元素将沿水平轴增大其大小。如果我们传递-1，元素将被翻转。

示例

在下面的示例中，我们使用transform属性和scaleX()函数来执行 水平翻转 。

<!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() 函数

ScaleY() 函数可以与 transform 属性一起使用，沿着垂直（Y）轴调整元素的大小。

它接受一个参数，如果我们传入1，元素保持不变，不会发生调整大小。如果我们传入2或更大的值，元素将沿垂直轴增大其大小。如果我们传入-1，元素将被翻转。

示例

在下面的示例中，我们使用 scaleY() 函数和 transform 属性执行了一个 垂直翻转 。

<!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()函数

RotateX()函数可以与transform属性一起使用，使元素围绕其水平（X）轴旋转。该函数只接受一个参数，该参数指定旋转角度（以度为单位）。

如果传递正值，元素将顺时针旋转；如果传递负值，元素将逆时针旋转。

示例

在这个例子中，我们使用transform属性和rotateX()函数来 镜像一个文本

<!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>