ホームページ  >  記事  >  ウェブフロントエンド  >  CSS でテキストを水平方向に反転できますか?ハサミキャラクター(✂️)を左向きに表示するにはどうすればよいですか?

CSS でテキストを水平方向に反転できますか?ハサミキャラクター(✂️)を左向きに表示するにはどうすればよいですか?

DDD
DDDオリジナル
2024-10-31 09:36:29490ブラウズ

Can CSS Flip Text Horizontally? How to Display the Scissors Character (✂️) Facing Left?

CSS3 によるテキストのミラーリング

質問:

CSS または CSS3 を使用してテキストをミラーリングすることは可能ですか?特に、ハサミの文字 (「✂」) を右ではなく左に表示するにはどうすればよいですか?

答え:

はい、CSS 変換を使用すると、次のことが可能になります。この効果。

  • 水平反転:
<code class="css">-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);</code>
  • 垂直反転:
<code class="css">-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);</code>

実際の例:

<code class="css">span {
  display: inline-block;
  margin: 1em;
}
.flip_H {
  transform: scale(-1, 1);
  color: red;
}
.flip_V {
  transform: scale(1, -1);
  color: green;
}</code>
<code class="html"><span class='flip_H'>Demo text &#9986;</span>
<span class='flip_V'>Demo text &#9986;</span></code>

以上がCSS でテキストを水平方向に反転できますか?ハサミキャラクター(✂️)を左向きに表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。