सीएसएस घुमावदार 90 डिग्री सेल्सियस बाएं मार्जिन

Question

मेरे पास div है जिसमें एक या अधिक बटन हैं। इसे 90 डिग्री घुमाया जा सकता है। लेकिन मुझे बाएं मार्जिन (वाई-एक्सिस) के साथ रखने के लिए घूर्णन div की आवश्यकता है और लंबवत रूप से वाई-एक्सिस के बीच गठबंधन किया गया है।

मैं एक बेला की कोशिश कर रहा शुरू कर दिया - http://jsfiddle.net/5rnm577a/

कोड नीचे दिया गया है

HTML:

<div> 
    <div id="yaxisbuttons"> 
     <p>Y Button 1</p> 
     <p>Y Button 2</p> 
    </div> 
</div> 

सीएसएस:

#yaxisbuttons { 
    padding:0px 0px 0px 0px; 
    text-align: center; 
    margin:0px; 
    width: 160px; 
    height:40px; 
    background:#FF931E; 
    z-index:15; 
    border-radius: 5px 5px 5px 5px; 
    -moz-transform:rotate(-90deg); 
    -ms-transform:rotate(-90deg); 
    -o-transform:rotate(-90deg); 
    -webkit-transform:rotate(-90deg); 
} 

किसी की मदद कृपया कर सकते हैं?

Answer 1

क्या आप चित्र खींचकर और अधिक समझा सकते हैं?

आप नीचे दिए गए कोड का उपयोग कर सकते हैं।

#yaxisbuttons { 
    padding: 0px 0px 0px 0px; 
    text-align: center; 
    margin: 180px 0 0 0px;/*Changed*/ 
    width: 160px; 
    height: 40px; 
    background: #FF931E; 
    z-index: 15; 
    border-radius: 5px 5px 5px 5px; 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    transform-origin: left top;/*New Added*/ 
} 

लाइव डेमो jsfiddle

Answer 2

पर एक बहुत क्या आप transform-origin बिंदु के रूप में चयन पर निर्भर करता है।

रोटेशन के अतिरिक्त आपको आवश्यकतानुसार तत्व ऊपर/नीचे/बाएं/दाएं अनुवाद करना होगा।

तत्व को स्थिति (%) के नीचे 50% की स्थिति में रखने के लिए आपको, erm, positioning का उपयोग करने की आवश्यकता होगी ... मैंने absolute का उपयोग किया लेकिन fixed भी काम करेगा।

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 300px; 
 
    width: 300px; 
 
} 
 
#yaxisbuttons { 
 
    position: absolute; 
 
    top: 50%; 
 
    padding: 0 5px; 
 
    text-align: center; 
 
    background: #FF931E; 
 
    border-radius: 5px; 
 
    transform-origin: center top; 
 
    transform: translateX(-50%) rotate(-90deg); 
 
} 
 
#yaxisbuttons p { 
 
    color: #fff; 
 
    line-height: 20px; 
 
    display: inline-block; 
 
} 
 
.line { 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 100%; 
 
    height: 1px; 
 
    border-bottom: 1px solid red; 
 
}

<div id="yaxisbuttons"> 
 
    <p>Y Button 1</p> 
 
    <p>Y Button 2</p> 
 
</div> 
 
<div class="line"></div>

मैं इस डेमो के प्रयोजनों के लिए स्थिति के दृश्य पुष्टि करने के लिए एक संदर्भ लाइन गयी।