能否使用CSS/CSS3来翻转文本?
具体而言,我有这个剪刀符号“✂”(✂
),我想将其显示为向左指而不是向右。
能否使用CSS/CSS3来翻转文本?
具体而言,我有这个剪刀符号“✂”(✂
),我想将其显示为向左指而不是向右。
以下是一个例子,展示如何翻转字符。如果需要,请添加供应商前缀,但目前所有现代浏览器都支持未加前缀的 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">✂</span></li>
<li>Flipped: <span class="scissors flipped">✂</span></li>
<li>Upward: <span class="scissors upward">✂</span></li>
<li>Downward: <span class="scissors downward">✂</span></li>
</ul>
</body>
</html>
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>
这是对我有效的代码:<span class="navigation-pipe">></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没有起作用。
direction: rtl;
可能是你正在寻找的。