घुमाएं और अनुवाद करें

Question

मुझे कुछ समस्याएं घूर्णन और पाठ की एक पंक्ति को पोजिशन करने में समस्याएं आ रही हैं। अब यह सिर्फ स्थिति है जो काम करता है। घूर्णन भी काम करता है, लेकिन केवल अगर मैं स्थिति को अक्षम करता हूं।

सीएसएस:

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

एचटीएमएल सिर्फ सादा पाठ है।

Answer 1

कारण यह है कि आप दो बार ट्रांसफॉर्म संपत्ति का उपयोग कर रहे हैं। कैस्केड के साथ सीएसएस नियमों के कारण, अंतिम घोषणा जीत जाती है यदि उनके पास समान विशिष्टता है। चूंकि दोनों परिवर्तन परिवर्तन एक ही नियम सेट में हैं, यह मामला है।

1. पाठ 90 अंश घुमाने:

   क्या यह क्या कर रहा है यह है। ठीक।

2. 50% द्वारा 50% का अनुवाद। ठीक है, इस कदम के रूप में एक ही संपत्ति है, इसलिए इस कदम कदम करते हैं और उपेक्षा 1.

http://jsfiddle.net/Lx76Y/ देखें और डीबगर में खोलने को देखने के लिए पहले घोषणा ओवरराइट

का अनुवाद करने पर घुमाने अधिलेखन है http://jsfiddle.net/Lx76Y/1/

ऐसा करने के लिए आप रूपांतरण के एक अंतरिक्ष विभाजित सूची का उपयोग:

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

पुन, तो आप उन्हें बजाय एक ही घोषणा में गठबंधन करने के लिए है सदस्य है कि वे एक श्रृंखला में निर्दिष्ट हैं, इसलिए अनुवाद पहले लागू किया जाता है, उसके बाद घुमाएं।

Answer 2

इसके लिए कोई आवश्यकता नहीं है, क्योंकि आप वांछित के रूप में मूल्य 'वर्टिकल-एलआर' या 'वर्टिकल-आरएल' के साथ सीएसएस 'लेखन-मोड' का उपयोग कर सकते हैं।

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

Answer 3

कुछ ऐसा याद किया जा सकता है: मेरे श्रृंखलन परियोजना में, यह एक अंतरिक्ष पृथक सूची भी अंत में एक स्पेस द्वारा पृथक अर्धविराम की जरूरत है पता चला है।

दूसरे शब्दों में, यह काम नहीं करता है:

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

लेकिन यह करता है:

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

Answer 4

मैं तो यहाँ टिप्पणी नहीं कर सकता हो जाता है। @ डेविड स्टोरी उत्तर के बारे में।

CSS3 चेन में "निष्पादन के आदेश" पर सावधान रहें! नियम (दाएं) से (दाएं) है। दाएं से बाएं नहीं।

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

"अनुवाद" ऑपरेशन की तुलना में "घुमाने" ऑपरेशन पहले किया जाता है, "अनुवाद" ऑपरेशन अगली/दूसरी होती है।

देखें: CSS3 transform order matters: rightmost operation first