首页 > web前端 > css教程 > 如何使用 CSS 转换水平和垂直翻转文本?

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

Patricia Arquette
发布: 2024-10-28 06:17:30
原创
631 人浏览过

How can I flip text horizontally and vertically using CSS transformations?

使用 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板