7

CSS3でテキストの回転がどのように機能するのかわかりません。

たとえば、ここで確認できます。回転したテキストが希望どおりの場所に配置されることはありません。

right: 0;
bottom: 0;

常に右側にギャップ/マージンがあります。そして、それを含むボックスの下部で常にオーバーランします。

どうすればこれを修正できますか？

jqueryを使用して修正したり、テキストローテーション用の信頼できるjqueryプラグインを使用したりできますか？

ありがとう。

4

2 に答える 2

19

回転ポイントを制御できることがわかっている場合、テキストの配置はそれほど難しくありません...

transform-origin: 0 0 || top left

あなたの特定のケースでは、次のように機能します。

.year
{
    display: block;
    writing-mode: tb-rl;
    -webkit-transform: rotate(270deg);
    -webkit-transform-origin: bottom left;   
    -moz-transform: rotate(270deg);
    -moz-transform-origin: bottom left; 
    -o-transform: rotate(270deg);
    -o-transform-origin: bottom left; 
    -ms-transform: rotate(270deg);
    -ms-transform-origin: bottom left; 
    transform: rotate(270deg);
    transform-origin: bottom left;  
    font-size: 24px; 
    position: absolute;
    right: -50px; /*.year width*/
    bottom: 0;
    border: 1px solid #000000; 
}

変換を取り出すと、.year が親ボックスのすぐ隣に配置され、下揃えになっていることがわかります。次に、左下隅を「回転ポイント」となるように指定します。テキストの配置を完全に制御します。

http://jsfiddle.net/PQ3Ga/

于 2011-06-03T12:59:18.633 に答える
3

CSSで回転したテキストを配置することは非常に困難です。テキストが回転する前に、位置が有効になることを覚えておく必要があります。例で回転を削除すると、回転されていないテキストが正しく配置されていることがわかります。

回転したテキストを正しく配置するには、回転が位置にどのように影響するかを計算してから、スタイルシートでその位置を修正する必要があります。

あなたの場合、あなたは必要です：

position: absolute;
right: -11px;
bottom: 9px;
于 2011-06-02T14:23:45.530 に答える