CSS3変換テキストの回転、固定位置の左右および垂直の中心合わせ

Question

ブラウザウィンドウの左側と右側に1つの要素を配置しようとしていますが、両方ともulとCSSトランスフォームの回転が含まれています。私は.rotate-leftとそのulを左に置くことができましたが、ulの内側を.rotate-rightの右に置くことができませんでした。 （これはサポートされていない変換場合は右から左に水平線上に見えるようにする必要があります。）

CSS：

.rotate-left ul li, 
.rotate-right ul li { 
    display: inline; 
} 

.rotate-left { 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    width: 10em; 
    white-space: nowrap; 
    background: silver; 
} 

.rotate-left ul { 
    display: inline-block; 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    height: 1.5em; 
    margin: auto; 
    background: red; 
    -webkit-transform-origin: 0 50%; 
     -moz-transform-origin: 0 50%; 
    -webkit-transform: rotate(-90deg) translate(-50%, 50%); 
     -moz-transform: rotate(-90deg) translate(-50%, 50%); 
} 

.rotate-right { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    width: 10em; 
    white-space: nowrap; 
    background: silver; 
} 

.rotate-right ul { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    height: 1.5em; 
    margin: auto; 
    background: red; 
    -webkit-transform-origin: 0 50%; 
     -moz-transform-origin: 0 50%; 
    -webkit-transform: rotate(90deg) translate(-50%, 50%); 
     -moz-transform: rotate(90deg) translate(-50%, 50%); 
} 

HTML：

<div class="rotate-left"> 
    <ul> 
     <li>left</li> 
     <li>left</li> 
     <li>left</li> 
    </ul> 
</div> 
<div class="rotate-right"> 
    <ul> 
     <li>right</li> 
     <li>right</li> 
     <li>right</li> 
    </ul> 
</div> 

-

デモ： http://codepen.io/anon/pen/FtyEG

私はこれを基にしてこの100% height block with vertical textを構築しました。

Answer 1

私はそれを解決し、コードを少しきれいにしました。

.left, 
.right { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    height: 1.5em; 
    margin: auto; 
} 

.left { 
    left: 0; 
    -webkit-transform-origin: 0 50%; 
     -moz-transform-origin: 0 50%; 
     -ms-transform-origin: 0 50%; 
     -o-transform-origin: 0 50%; 
      transform-origin: 0 50%; 
    -webkit-transform: rotate(-90deg) translate(-50%, 50%); 
     -moz-transform: rotate(-90deg) translate(-50%, 50%); 
     -ms-transform: rotate(-90deg) translate(-50%, 50%); 
     -o-transform: rotate(-90deg) translate(-50%, 50%); 
      transform: rotate(-90deg) translate(-50%, 50%); 
} 

.right { 
    right: 0; 
    -webkit-transform-origin: 100% 50%; 
     -moz-transform-origin: 100% 50%; 
     -ms-transform-origin: 100% 50%; 
     -o-transform-origin: 100% 50%; 
      transform-origin: 100% 50%; 
    -webkit-transform: rotate(90deg) translate(50%, 50%); 
     -moz-transform: rotate(90deg) translate(50%, 50%); 
     -ms-transform: rotate(90deg) translate(50%, 50%); 
     -o-transform: rotate(90deg) translate(50%, 50%); 
      transform: rotate(90deg) translate(50%, 50%); 
} 

デモ：http://codepen.io/anon/pen/LHeaB

Answer 2

私は多かれ少なかれそれを得ると思います。

.rotate-right ul { 
    -webkit-transform-origin: 78% 100%; 
    -webkit-transform: rotate(90deg) translate(0%, 0%); 

変換元が[OK]を選択した場合は翻訳する必要はありません。 78％に行くと、幅を補うことになります