[解決済み】CSSでテキストをミラーリング/反転させることは可能ですか?
2022-04-01 04:48:23
質問
CSS/CSS3を使用して、テキストをミラーリングすることは可能でしょうか?
具体的には、このハサミの文字「✂」(
✂
を右でなく左に向けて表示させたいのですが。
どのように解決するのですか?
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);
DEMO:
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 ✂</span>
<span class='flip_V'>Demo text ✂</span>
関連
-
[解決済み】フッターをページの下部に中央に配置するにはどうすればよいですか?
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] span with onclick event inside the tag
-
[解決済み] 高さを固定したBootstrapパネルボディの作り方
-
[解決済み] 文字列が部分文字列で終わっているかどうかをXPathでテストする?
-
[解決済み] 順序なしリストが div 内で左いっぱいに整列されない
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] CSSのクラスは、1つまたは複数の他のクラスを継承することができますか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】HTML5検証エラー:body開始タグは見たが、同じタイプの要素がすでに開かれていた
-
[解決済み】ラジオボタンの代わりに画像を使用する
-
[解決済み] div要素間の空白を削除する方法
-
[解決済み] 高さを固定したBootstrapパネルボディの作り方
-
[解決済み] d3.tipが動作しないのはなぜですか?
-
[解決済み] 文字列が部分文字列で終わっているかどうかをXPathでテストする?
-
[解決済み] 送信ボタンが機能しない
-
[解決済み] Favicon.icoを表示させることができません。
-
[解決済み] TD rowspan が機能しない
-
[解決済み] type="application/x-shockwave-flash "で表示可能な形式は?