CSS3 घुमावदार पाठ, निश्चित स्थिति बाएं और दाएं, लंबवत केंद्रित

Question

मैं एक तत्व को बाईं ओर और ब्राउज़र विंडो के दाईं ओर स्थित करने की कोशिश कर रहा हूं, दोनों में ul सीएसएस ट्रांसफॉर्म घुमाने के साथ है। मैंने .rotate-left और इसके ul को बाईं ओर स्थानांतरित करने में कामयाब रहा है, लेकिन मैं ul को .rotate-right दाईं ओर स्थित करने में असमर्थ रहा हूं। (यह बदलने अगर समर्थित नहीं है दाएं से बाएं एक क्षैतिज रेखा पर दिखाई दे सकता है की जरूरत है।)

सीएसएस:

.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%); 

यदि आप ट्रांसफॉर्म उत्पत्ति को ठीक करते हैं तो आपको अनुवाद करने की आवश्यकता नहीं है; 78% पर जाने के लिए ली चौड़ाई