如何使用 CSS 转换水平和垂直翻转文本？

使用 CSS 转换翻转文本

在 CSS 中，您可以使用转换来操作文本和其他元素。一种常见的转换是镜像，也称为翻转。使用简单的 CSS 属性即可实现此效果。

要水平翻转文本（在垂直轴上镜像），请使用以下 CSS 属性：

-moz-transform：缩放(-1, 1);
-webkit-transform: 缩放(-1, 1);
-o-transform: 缩放(-1, 1);
-ms-transform: 缩放( -1, 1);
transform:scale(-1, 1);

此属性将元素水平缩放 -1，有效地沿垂直轴翻转它。

类似地，要垂直翻转文本（在水平轴上镜像），请使用以下属性：

-moz-transform:scale(1, -1);
-webkit-transform : 尺度(1, -1);
-o-transform: 尺度(1, -1);
-ms-transform: 尺度(1, -1);
变换: 尺度(1, -1);

通过应用此属性，您可以将元素垂直缩放 -1，并沿水平轴翻转它。

示例

考虑以下 HTML 代码，它显示一些文本和剪刀字符：

演示文本 ✂
演示文本 ✂

下面的 CSS 代码将水平和垂直翻转效果应用于相应的 Span：

span{ 显示：内联块；保证金：1em； }
.flip_H{ 变换：scale(-1, 1);颜色：红色； }
.flip_V{ 变换：scale(1, -1);颜色：绿色； }

这将沿着各自的轴镜像剪刀角色，创建所需的左向剪刀。

以上是如何使用 CSS 转换水平和垂直翻转文本？的详细内容。更多信息请关注PHP中文网其他相关文章！