当前位置: 首页 > 面试题库 >

您可以使用CSS来镜像/翻转文本吗?

汪欣德
2023-03-14
问题内容

是否可以使用CSS / CSS3镜像文本?

具体来说,我有这个剪刀char“✂”(✂),我想显示左指向右。


问题答案:

您可以使用CSS转换来实现此目的。水平翻转将涉及像这样缩放div:

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

垂直翻转会涉及到像这样缩放div:

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

演示:

span{ display: inline-block; margin:1em; }

.flip_H{ transform: scale(-1, 1); color:red; }

.flip_V{ transform: scale(1, -1); color:green; }


<span class='flip_H'>Demo text &#9986;</span>

<span class='flip_V'>Demo text &#9986;</span>


 类似资料:
  • 问题内容: 我做了一些谷歌搜索,这是我的答案 这里唯一的问题是镜像的中心不是对象的中心,因此也许我们需要一些JavaScript才能将对象移动到所需位置。 问题答案: 您的代码是正确的,但是有一种更简单的方法可以做到这一点: 我认为这可以解决您居中的镜像问题。 如前所述,您必须将元素设置为使用块,行内块等的显示。

  • 问题内容: 我试图翻转图像以显示4种方式:原始(无变化),水平翻转,垂直翻转,水平+垂直翻转。 为了做到这一点,我在下面做,除了水平+垂直翻转之外,它还可以正常工作,你知道为什么它不起作用吗? 问题答案: 尝试这个: 以前没有用,因为您在CSS中覆盖了。因此,它没有执行全部操作,而是执行了最后一个操作。有点像如果您执行两次,它将覆盖第一个。

  • 我正在使用CSS关键帧动画两个单独的文本。 我面临的问题是,在100%动画完成时第一个span元素(“first text”)的文本突然出现,而不是在“first text”完成后第二个span元素的文本翻转。 null null

  • 问题内容: 我有一个高度为200px的textarea,但是当我通过文本传递200px时,我想让textarea扩展而不是用滚动条保持200px的高度。 只能使用CSS来做到这一点吗? 问题答案: 相反的,你可以使用与CONTENTEDITABLE属性:

  • 问题内容: 我一直在试图弄清楚如何翻转图像,但是还没有弄清楚。 我使用画一个与 我只需要一种在水平或垂直轴上翻转图像的方法。 如果您愿意,可以查看github上的完整源代码。 问题答案: 来自http://examples.javacodegeeks.com/desktop-java/awt/image/flipping-a- buffered-image :

  • 问题内容: 我想在CSS中使用条件。 我的想法是,当站点运行以生成正确的样式表时,我将替换一个变量。 我想要它,以便根据此变量更改样式表! 看起来像: 能做到吗?你怎么做到这一点? 问题答案: 不是传统意义上的,但如果可以访问HTML,则可以为此使用类。考虑一下: 并在您的CSS文件中: 这就是 CSS的 方法。 然后是CSS预处理程序,如Sass。您可以在此处使用条件语句,如下所示: 缺点是,您