回転して翻訳する

Question

テキストの行を回転して配置する際に問題が発生します。今はそれがうまくいく位置です。ローテーションも機能しますが、ポジショニングが無効になっている場合に限ります。

CSS：

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

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

Answer 1

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

はこれです：

1. テキストを90度回転させます。 OK。
2. 50％50％翻訳します。 [OK]を、これは、ステップ1と同じ性質であるので、この手順を実行し、ステップ1

http://jsfiddle.net/Lx76Y/を参照して翻訳したよう

を上書き最初の宣言は、回転を上書きしている見るためにデバッガで開きを無視します

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

日時：http://jsfiddle.net/Lx76Y/1/

あなたは変換のスペース区切りのリストを使用してこれを行うには：、あなたの代わりに同じ宣言でそれらを結合する必要がありますメンバーは連鎖で指定されているため、変換が最初に適用され、その後に変換が適用されます。

Answer 2

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

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

Answer 3

逃したことがあります何か：私の連鎖のプロジェクトでは、スペースで区切られたリストには、末尾のスペースで区切られたセミコロンを必要と判明しました。

つまり

、これは動作しません：

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

が、これが行われます。

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

Answer 4

私はここにコメントすることはできません。 @David Storeyについて回答。

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

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

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

は参照してください：私はチェーンを心に留めておくことが非常に重要であることを発見しました CSS3 transform order matters: rightmost operation first