回転して翻訳する

Question 1

テキスト行の回転と配置に問題があります。今では、機能するのは位置だけです。回転も機能しますが、位置決めを無効にした場合に限ります。

CSS：

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

htmlは単なるプレーンテキストです。

Question 2

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

それがしていることはこれです：

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

変換は回転を上書きするため、代わりに同じ宣言でそれらを組み合わせる必要があります：http：//jsfiddle.net/Lx76Y/1/

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

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

それらはチェーンで指定されるため、最初に移動が適用され、その後に回転が適用されることに注意してください。

Question 3

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

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

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

rotate操作は、その後、最初に行われますtranslate。

Question 4

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

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

Question 5

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

言い換えれば、これは機能しません：

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

しかし、これはします：

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