[解決済み】クロスブラウザでCSSを使って縦書き文字を描くには?
2022-04-03 15:02:07
質問
クロスブラウザ(>= IE6, >= Firefox 2, Chrome, Safari, Operaのいずれかのバージョン)に対応し、1単語のテキストを90度回転させたいのですが、可能でしょうか?これはどうすればできるのでしょうか?
解決方法は?
この回答を最新の情報で更新しました(以下 CSSトリック ). フィルタの実装を指摘してくれたMattとDouglasに感謝します。
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
/* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/* Should be unset in IE9+ I think. */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
古い回答です。
FF 3.5、Safari/Webkit 3.1については、こちらをご確認ください。 -モズトランスフォーム (と-webkit-transform)。 IEでは マトリックスフィルター (v5.5+)ですが、使い方がよくわかりません。 Operaにはまだ変換機能がない。
.rot-neg-90 {
/* rotate -90 deg, not sure if a negative number is supported so I used 270 */
-moz-transform: rotate(270deg);
-moz-transform-origin: 50% 50%;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: 50% 50%;
/* IE support too convoluted for the time I've got on my hands... */
}
関連
-
[解決済み] ボディの背景色が表示されない?
-
[解決済み] Bootstrapのカラム内で画像を中央に配置する方法 [重複]について
-
[解決済み] divが重ならないようにするには?
-
[解決済み] HTMLのバックスペース
-
[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] チェックボックスとそのラベルをクロスブラウザーで一貫して揃える方法
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み】全てのブラウザで、Webページのキャッシュを制御するには?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】位置固定が機能しない
-
[解決済み】iframeの背景色を変更する問題
-
[解決済み】このインラインブロックのdiv要素の間に説明のつかない隙間があるのはなぜですか?[重複]
-
[解決済み】Markdownで'target="_blank"'でリンクを作成することはできますか?
-
[解決済み] span with onclick event inside the tag
-
[解決済み] 絶対位置が機能しない
-
[解決済み] ボディの背景色が表示されない?
-
[解決済み] iFrameがURLを読み込んでいない
-
[解決済み] What is the difference between <p> and <div>?
-
[解決済み] HTML Divのボーダーが表示されない