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