logo标签列表

你能否使用CSS来镜像/翻转文本？

htmlcss
303

能否使用CSS/CSS3来翻转文本？

具体而言，我有这个剪刀符号“✂”（✂），我想将其显示为向左指而不是向右。

10
如果剪刀的图片因某种原因无法使用，我曾经看到过用%<和>%来伪造它。 - Pete Wilson
1
查看这个帖子：https://dev59.com/M3A75IYBdhLWcg3wK10p - Lucas Vall
3
迈克尔的答案更准确。请更新正确的答案吗？因为你标记为正确的答案不是镜面而是绕180度旋转。 - Sanket Sahu
@PeteWilson，✂字符这么常见吗？它有什么用途？ - Pacerier
+5 for nice question - Elyor
4
请注意，根据表情符号的实现，其旋转方向可能不同。在苹果的表情符号集中，箭头指向下方。 - Akkumulator
15个回答
2

以下是一个例子，展示如何翻转字符。如果需要，请添加供应商前缀，但目前所有现代浏览器都支持未加前缀的 transform 属性。唯一的例外是 Opera 浏览器，如果启用了 Opera Mini 模式（全球约 3% 的用户使用此模式）。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Text rotation</title>
  <style type="text/css" media="screen">
    .scissors {
      display: inline-block;
      font-size: 50px;
      color: red;
    }
    .original {
      color: initial;
    }
    .flipped {
      transform: rotateZ(180deg);
    }
    .upward {
      transform: rotateZ(-90deg);
    }
    .downward {
      transform: rotateZ(90deg);
    }
  </style>
  
</head>
<body>
  <ul>
    <li>Original: <span class="scissors original">&#9986;</span></li>
    <li>Flipped: <span class="scissors flipped">&#9986;</span></li>
    <li>Upward: <span class="scissors upward">&#9986;</span></li>
    <li>Downward: <span class="scissors downward">&#9986;</span></li>
  </ul>
</body>
</html>

1
1
box-reflect是一个仅适用于Webkit的属性。但我不认为它有-moz-的等效物..请查看此帖子。 - Mithun Satheesh
分隔符应为“:”，而不是“;”。 - Mithun Satheesh
1
我们可以使用很少的代码来制作漂亮的文本效果，使用CSS关键帧和它的alternate属性（尝试删除alternate以查看差异）： 

span {
  font-weight: 1000; font-size: 3.3em;
}
small {
  display: inline-block;
  font-size: 2.3em;
  animation: 1s infinite alternate coolrotate
}

@keyframes coolrotate {
  from {
    transform: scale(1, 1) translate(-0.1em, 0)
  }
  to {
    transform: scale(-1, 1) translate(0, 0)
  }
}
<span>
  <span>c</span>
  <small>o</small>
  <span>o</span>
  <small>L</small>
  <small>...</small>
</span>

0

这是对我有效的代码：<span class="navigation-pipe">&gt;</span>

display:inline-block;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);

只需要使用display:inline-block或block就可以旋转。所以基本上第一个答案就很好。但是-180没有起作用。

-1

direction: rtl; 可能是你正在寻找的。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接