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

Question 1

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

सीएसएस:

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

Html सिर्फ सादा पाठ है।

Question 2

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

यह क्या कर रहा है:

पाठ को 90 डिग्री घुमाएँ। ठीक।
50% का 50% अनुवाद करें। ठीक है, यह चरण एक जैसी संपत्ति है, इसलिए इस चरण को करें और चरण 1 को अनदेखा करें।

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

जैसा कि अनुवाद घूर्णन को अधिलेखित कर रहा है, आपको उन्हें उसी घोषणा में संयोजित करना होगा: http://jsfiddle.net/Lx76Y/1/

ऐसा करने के लिए आप ट्रांसफ़ॉर्म की एक अलग से अलग सूची का उपयोग करते हैं:

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

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

Question 3

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

CSS3 श्रृंखलाओं में "निष्पादन के आदेश" पर सावधान रहें! आदेश दाएं से बाएं है, बाएं से दाएं नहीं।

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

rotateआपरेशन पहले किया जाता है, तो translate।

देखें: CSS3 ट्रांसफॉर्म ऑर्डर के मामले: सबसे पहले ऑपरेशन

Question 4

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

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

Question 5

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

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

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

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

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