90 डिग्री घुमावदार पाठ, सीएसएस

के साथ पृष्ठ शीर्ष-दाएं पृष्ठ पर फ्लश करें, मुझे पता है कि सीएसएस का उपयोग करके 90 डिग्री पाठ को घुमाने के लिए कैसे, लेकिन मैं पृष्ठ के शीर्ष दाएं (या मूल तत्व) को टेक्स्ट को संरेखित करने का प्रयास कर रहा हूं। इसके 90 डिग्री-घूर्णन वाले स्व के रूप में। क्या यह संभव है?90 डिग्री घुमावदार पाठ, सीएसएस

उदाहरण:

enter image description here

स्रोत

2013-08-22 Dan

क्या आप वर्तमान में मौजूद कोड दिखा सकते हैं? क्या आपने सही तरीके से संरेखण का उपयोग करने का प्रयास किया था? – Siva

पिछले समाधानों में से कोई भी पाठ की किसी भी मात्रा के लिए काम नहीं करता है। आपको ट्रांसफॉर्म-उत्पत्ति का उपयोग करने की आवश्यकता है।

<div class="container"> 
<span class="rotate">Hello THERE!</span> 
</div> 

.rotate { 

    -webkit-transform: rotate(90deg); 
    -webkit-transform-origin: left top; 
    -moz-transform: rotate(90deg); 
    -moz-transform-origin: left top; 
    -ms-transform: rotate(90deg); 
    -ms-transform-origin: left top; 
    -o-transform: rotate(90deg); 
    -o-transform-origin: left top; 
    transform: rotate(90deg); 
    transform-origin: left top; 

    position: absolute; 
    top: 0; 
    left: 100%; 
    white-space: nowrap;  
    font-size: 48px; 
}

स्रोत

2013-08-23 00:11:52 meub

इस सटीक एक ही उत्तर को पोस्ट करने वाला था, बहुत तेज़ सर –

यह जाने का सही तरीका है। यदि आपको कोई संदेह है, तो इसे डेमो में फेंक दें और टेक्स्ट के फ़ॉन्ट-आकार को ऊपर और नीचे बंपिंग के साथ खेलें ... फिर इसे अन्य उत्तरों के साथ आज़माएं। यह बहुत अधिक लचीला और रखरखाव योग्य है। – Will

ग्रेट, मूल उत्पत्ति के साथ घूम रहा था लेकिन इसे नाखून नहीं कर सका। धन्यवाद! – Dan

मेरे पहली बार कुछ बहुत ही इस के लिए नए कोड, लेकिन यहाँ उत्तर दे रहा है:

<div id="block"> 
<p id="rotate">Hello!!!</p> 
</div> 

<style> 
#block{ 
    width:500px; 
    height:500px; 
    display:block; 
    margin:auto; 
    border: 1px solid #000; 
    position:absolute; 
    } 

#rotate { 
    position:relative;/* place the text relateve to whatever tag is devined as absolute */ 
    left:130px;/* change these dimensions - can use left or right */ 
    top:20px;/* change these dimensions can use top or bottom*/ 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 

} 
</style>

स्रोत

2013-08-23 00:04:17

समाधान सरल है, पाठ और स्थिति पूर्ण में रोटेशन जोड़ने ।

<style> 
#block{ 
    width:500px; 
    height:500px; 
    display:block; 
    margin:auto; 
    border: 1px solid #000; 
    position:relative; 
    } 

#text { 
    padding:0; 
    margin:0; 
    position:absolute; 
    right:0; 
    font-size:30px; 
    top:40px; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
} 
</style> 
<div id="container"> 
<p id="text">Hello!!!</p> 
</div>

स्रोत

2013-08-23 00:09:23

90 डिग्री घुमावदार पाठ, सीएसएस

उत्तर

संबंधित मुद्दे