使用 CSS 翻转文本

cssweb developmentfront end technology更新于 2025/2/18 0:44:17

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

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

以下是执行翻转的方法:

步骤 1 - 创建一个 HTML 文件，并使用带有类名"XYZ"的 <span> 元素添加文本。
步骤 2 - 现在，添加 CSS 来指定 <span> 的显示和边距属性。标签。
步骤 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，元素将被翻转。

示例

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

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