css - CSS 回転テキストによる柔軟なレイアウト

Question

テキストラベルを 270 度回転させる必要があるコントロールをレイアウトしようとしています。テキストラベルの幅は、理由の範囲内で可変です (たとえば、100px から 500px)。

ここに画像の説明を入力

これをjsFiddleで機能させようとしました

しかし、私が解決できないいくつかの問題に遭遇しました:

CSS 変換を使用してこれらの問題を解決することは可能ですか?

アップデート

この jsFiddle は問題 2. をより明確にします。

score 0 · Accepted Answer

これはあなたが探しているものですか？

div の高さを修正する唯一の解決策は JavaScript だと思います。

余分なスペースをなくすために、div を完全に配置しました。

IE の回転値も適切ではないと思います。それらを 1.2 に変更したところ、うまくいったようです。ただし、IE で div の正しい高さを取得する方法にまだ取り組んでいますが、同じようには機能しません。

編集：

IE は実際に要素の寸法を変更するため、高さを取得する必要があります。また IE では、回転された div は、他のブラウザーのように下からではなく、コンテナーの上から配置する必要があります。

編集：更新されたリンク

score 0 · Accepted Answer

私はIEサポートを管理するためにmbFlipTextと呼ばれる小さなjQueryラッパーによって生成されたSVGを使用してこの問題を解決しました

score 0 · Accepted Answer

の影響を受けるすべての変換が適用されtransform-originます。デフォルトでは50% 50%、すべての変換がブロックの中心に対して相対的に行われることを意味する値があります。

0 0主なアイデアは、 (左上隅) に変更することです— これにより、dabblet.com の「回転したテキストの長さに基づいてハードコードされた値」のデモを省略することができます。

それをセットアップしてみてください：

ここに画像の説明を入力

CSS:

transform: rotate(-270deg);
transform-origin: 0 0;

3 に答える 3