jquery टेक्स्ट रोटेशन

Question

मुझे एक div के अंदर एक साधारण पाठ मिला है, कुछ निम्न जैसा है;

<div id="banner"> 
    <div>This is an example text</div> 
</div> 

मैं चाहता हूं कि div के अंदर पाठ 20-30 डिग्री घुमाए। मुझे इसके बारे में stackoverflow पर this विषय मिल गया है और यह मुझे फ़ायरफ़ॉक्स और क्रोम में वांछित परिणाम देता है लेकिन आईई 7, आईई 8 और आईई 9 में नहीं। मैंने jquery rotate भी कोशिश की, लेकिन इसका उपयोग करते समय ऐसा लगता है कि प्लगइन div के अंदर पाठ को घूर्णन करने के बजाय, div को स्वयं गायब कर रहा है, इसे गायब कर रहा है। क्या यह जावास्क्रिप्ट और/या सीएसएस के साथ भी संभव है?

नोट: Cufon भी उपयोग किया जा रहा है। Codlers जवाब के बाद

अद्यतन:

यह Codler के जवाब के बाद वर्तमान लागू किया सीएसएस है। एफएफ और क्रोम में काम करता है।

-ms-transform: rotate(-20deg); 
-moz-transform: rotate(-20deg); 
/*-moz-rotation-point: 0 0;*/ 
-webkit-transform: rotate(-20deg); 
/*-webkit-rotation-point: 0 0;*/ 
-o-transform: rotate(-20deg); 
/*-ms-writing-mode: tb-lr; 
* html writing-mode: tb-lr;*/ 

अद्यतन 2: IE7 और IE8 अब पाठ घूम रहे हैं, लेकिन IE9 में मैं अपने घुमाया पाठ के पीछे एक बड़ा काला वर्ग हो रही है। ऐसा किस कारण से हो रहा होगा? सीएसएस अब नीचे है;

-moz-transform: rotate(-20deg); 
-o-transform: rotate(-20deg); 
-webkit-transform: rotate(-20deg); 
-ms-transform: rotate(-20deg); 
transform: rotate(-20deg); 
background-color:transparent; 

/*-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')";*/ 
/*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');*/ 
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand'); 
zoom: 1; 
z-index:1; 

position:absolute; 

padding  : 45px 10px 15px 10px; 

कोड का अंतिम कामकाजी टुकड़ा। इस पैर के लिए क्रेडिट जेफ और कोडर जाओ।

HTML:

<div id="banner"> 
    <div>This is an example text</div> 
</div> 

डिफ़ॉल्ट सीएसएस:

#banner > div 
{  
    -moz-transform: rotate(-20deg);     /*FF*/ 
    -o-transform: rotate(-20deg);     /*Opera*/ 
    -webkit-transform: rotate(-20deg);    /*Safari, Chrome*/ 
    -ms-transform: rotate(-20deg) !important;  /*IE9*/ 
     transform: rotate(-20deg);      /*CSS3 default*/ 
    background-color:transparent; 

    zoom: 1; 
    z-index:1; /*NEEDED FOR IE8*/ 

    width: 191px; 

    position:absolute; 

    padding  : 45px 10px 15px 10px; 
} 

सीएसएस के लिए IE 7 & 8 - सशर्त लोड किया गया:

#banner 
{ 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand') !important; 
    padding-top:0px; 
} 

Answer 1

मानकों का अनुपालन करने ब्राउज़रों में आप CSS3 संपत्ति transform है, हालांकि यह शायद विक्रेता उपसर्गों उपयोग करने के लिए एक अच्छा विचार है, उदा .:

-o-transform: rotate(5deg); 
-khtml-transform: rotate(5deg); 
-webkit-transform: rotate(5deg); 
-moz-transform: rotate(5deg); 

इंटरनेट एक्सप्लोरर 6 और 7 में है का उपयोग कर सकते हैं, चीजों को मुश्किल हो। आप घूर्णन करने के लिए आईई की filter संपत्ति का उपयोग कर सकते हैं।

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 

तत्व 90 डिग्री घुमाएगा। आप rotation=2 या rotation=3

का उपयोग करके 180 या 270 डिग्री घुमा सकते हैं क्या आप IE में किसी भिन्न कोण पर घूमना चाहते हैं? क्या आप सिरदर्द के लिए तैयार हैं?

आप IE के filter संपत्ति फिर से उपयोग और मैट्रिक्स निर्देशांक निर्दिष्ट कर सकते हैं, और कुछ इस तरह वास्तव में बदसूरत मिलती है:

progid:DXImageTransform.Microsoft.Matrix(M11=0.99619470, M12=0.08715574, M21=-0.08715574, M22=0.99619470,sizingMethod='auto expand'); 

कैसे मैट्रिक्स this page पर निर्देशांक उपयोग करने के लिए है, लेकिन स्पष्ट रूप से उनमें से कोई भी बनाने पर निर्देश हैं कोई समझ एक बेहतर समाधान इस आसान Matrix calculator का उपयोग करना है जो आपको डिग्री में कोण निर्दिष्ट करते समय आवश्यक सीएसएस उत्पन्न करेगा।

आप एक उदाहरण देखने के लिए my site पर सीएसएस की जांच कर सकते, लेकिन मैं इसे एक समय में आईई का उपयोग जांच न की हो, तो मैं कोई वादा नहीं कर सकते हैं ...

Answer 2

यह css3 साथ बारी बारी से करने के लिए संभव है

transform: rotate(20deg); 

याद रखें कि कुछ ब्राउज़र को विक्रेता उपसर्ग की आवश्यकता होती है।

.box_rotate { 
    -moz-transform: rotate(20deg); /* FF3.5+ 
     -o-transform: rotate(20deg); /* Opera 10.5 
    -webkit-transform: rotate(20deg); /* Saf3.1+, Chrome 
     -ms-transform: rotate(20deg); /* IE9 
      transform: rotate(20deg); 
      filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 
        M11=0.9396926207859084, M12=-0.3420201433256687, M21=0.3420201433256687, M22=0.9396926207859084, sizingMethod='auto expand'); 
       zoom: 1; 
} 

स्रोत http://css3please.com/

Answer 3

यह वास्तव में संभव IE में है। सबसे अच्छा, आईई केवल 90 डिग्री के गुणकों में घूम सकता है, और यहां तक ​​कि यह एक दर्द (आईआईआरसी) भी है। हालांकि, this answer अन्यथा दावा करता है।

आधुनिक ब्राउज़रों के लिए, transform, -webkit-transform, और -moz-transform का उपयोग करें, जैसा कि पहले से ही सुझाव दिया गया है।

आप IE में VML (वेक्टर मार्कअप भाषा) का उपयोग करके इसे होस्ट करने में सक्षम हो सकते हैं। मुझे लगता है कि यह मनमाने ढंग से घूर्णन कर सकता है।

Answer 4

इस उपकरण का उपयोग उत्पन्न करने के लिए सीएसएस कि पार ब्राउज़र काम करेगा:

http://www.useragentman.com/IETransformsTranslator/index.html

यह reallywork करता है।

Answer 5

ऐसा लगता है कि आईई 9 में पृष्ठभूमि में काला वर्ग तब होता है जब उन बुरा मालिकाना फ़िल्टर चयनकर्ता में भी होते हैं जहां आप सीएसएस ट्रांसफॉर्म कर रहे हैं।