web-dev-qa-db-ja.com

回転および翻訳

テキスト行の回転と配置に問題があります。今では、機能するのは位置だけです。回転も機能しますが、ポジショニングを無効にした場合のみです。

CSS：

#rotatedtext {
    transform-Origin: left;
    transform: rotate(90deg);
    transform: translate(50%, 50%);
}

Htmlは単なるテキストです。

csscss3webkittransformcss-transforms
72
Sera

その理由は、transformプロパティを2回使用しているためです。カスケードのCSSルールにより、同じ特異性があれば最後の宣言が優先されます。両方の変換宣言が同じルールセットにあるため、これが当てはまります。

それはこれです：

  1. テキストを90度回転します。 OK。
  2. 50％から50％に翻訳します。 OK、これはステップ1と同じプロパティなので、このステップを実行し、ステップ1を無視します。

http://jsfiddle.net/Lx76Y/ を参照し、デバッガーで開いて最初の宣言が上書きされていることを確認します

翻訳は回転を上書きするので、代わりに同じ宣言でそれらを結合する必要があります： http://jsfiddle.net/Lx76Y/1/

これを行うには、変換のスペース区切りリストを使用します。

#rotatedtext {
    transform-Origin: left;
    transform: translate(50%, 50%) rotate(90deg) ;
}

これらはチェーンで指定されているため、最初に変換が適用され、次に回転が適用されます。

125
David Storey

コメントできないので、ここに行きます。 @David Storeyの回答について。

CSS3チェーンの「実行順序」に注意してください！ルールは（右）から（左）です。左から右ではありません。

transformation: translate(0,10%) rotate(25deg);

「回転」操作が最初に行われ、「変換」操作が次/秒になります。

参照： CSS3変換順序が重要：右端の操作が最初

7
darthRods

必要に応じて、値 'vertical-lr'または 'vertical-rl'でcss 'writing-mode'を使用できるため、その必要はありません。

.item {
  writing-mode: vertical-rl;
}

CSS:writing-mode

4
biojazzard

見落とされる可能性のあるもの：私のチェーンプロジェクトでは、スペースで区切られたリストには最後にスペースで区切られたセミコロンも必要であることが判明しました。

つまり、これは機能しません。

transform: translate(50%, 50%) rotate(90deg);

しかし、これは：

transform: translate(50%, 50%) rotate(90deg) ; //has a space before ";"
2
Brian Coyle