CSS3 का रूपांतरण काम नहीं कर रहा है

122

मैं अपने मेनू आइटम को 10 डिग्री घुमाकर बदलने की कोशिश कर रहा हूं। मेरा सीएसएस फ़ायरफ़ॉक्स में काम करता है लेकिन मैं क्रोम और सफारी में प्रभाव को दोहराने में विफल रहा हूं। मुझे पता है कि IE इस CSS3 की संपत्ति का समर्थन नहीं करता है ताकि कोई समस्या न हो।

मैंने CSS का उपयोग किया:

li a {
   -webkit-transform:rotate(10deg);
   -moz-transform:rotate(10deg);
   -o-transform:rotate(10deg); 
}

क्या कोई कृपया सुझाव दे सकता है कि मैं कहाँ गलत हो रहा हूँ?

धन्यवाद।

html css

— श्रुति
स्रोत

2

FYI करें, IE इस CSS3 की संपत्ति का समर्थन करता है, आपको बस एक उपसर्ग की आवश्यकता है:-ms-transform:rotate(10deg);

— जोशुआ पिंटर

के संभावित डुप्लिकेट सीएसएस बदलने इनलाइन तत्वों पर काम नहीं करता है

— एमईएमएस

2

चूंकि किसी ने भी अभी तक इसका उल्लेख नहीं किया है, चूंकि यह 2016 है अब सुनिश्चित करें कि आप सीएसएस नियम (जैसे transform: rotate(10deg);) के उपसर्गित संस्करण को जगह देते हैं, जो भी उपसर्गित संस्करण आप समर्थन करने के लिए चुनते हैं।

— मैक्सिमिलियन लूमिस्टर

301

यह आपके HTML / CSS के बाकी हिस्सों को देखे बिना एक शिक्षित अनुमान मात्र है:

आपने आवेदन किया है display: blockया display: inline-blockकरने के लिए li a? यदि नहीं, तो प्रयास करें।

अन्यथा, CSS3 को बदलने के नियमों को लागू करने का प्रयास करें li।

— thirtydot
स्रोत

22

मैं तुमसे प्यार करता हूँ! display: inline-blockमदद की।

— कीड़े बनी

2

एक स्पष्टीकरण उपयोगी होगा :)

— scitronboy

56

वेबकिट-आधारित ब्राउज़र (सफारी और क्रोम) में, -webkit-transform इनलाइन तत्वों पर ध्यान नहीं दिया जाता है। । इसे कामdisplay: inline-block; करने के लिए सेट करें । प्रदर्शन / परीक्षण उद्देश्यों के लिए, आप एक नकारात्मक कोण का उपयोग करना चाहते हैं या transformation-originऐसा प्रतीत हो सकता है कि पाठ को दृश्य क्षेत्र से बाहर घुमाया गया है।

— phihag
स्रोत

मेरे लिए पूरी तरह से काम किया, धन्यवाद! मैंने इसका उपयोग एक कॉपलेफ़्ट प्रतीक बनाने के लिए <span> & copy </ span> पर किया था।

— एलिजाबेथ

@ एलिसबेथ यह एक उत्कृष्ट अनुप्रयोग है। ध्यान दें कि इकाई संदर्भों को एक अर्ध-बृहदान्त्र द्वारा समाप्त किया जाना चाहिए (हालांकि <span>©</span>), हालांकि अधिकांश ब्राउज़र दोनों तरीकों को प्रस्तुत करते हैं।

— फिहाग

एक और नोट: यदि आप एक अंतःक्रियात्मक स्थिति के लिए परिवर्तन लागू कर रहे हैं (उदाहरण के लिए, :hoverया :active) तो आपको inline-blockअपने डिफ़ॉल्ट राज्य में तत्व को लागू करना होगा, जैसे a { display: inline-block; } a:active { transform: translateY(0.125em); },। inline-blockअकेले बातचीत की स्थिति में लागू करने से काम नहीं लगता है। कम से कम क्रोम में - यह फ़ायरफ़ॉक्स में ठीक काम करता है।

— पॉल डी'अवेट

1

इस तथ्य को इंगित करने के लिए धन्यवाद कि -webkit-transformइनलाइन आइटम पर काम नहीं करता है। पहले इस पर अटक गया था।

— pbojinov

@phihag उत्कृष्ट बिंदु, आपने मुझे कुछ प्रमुख बालों को खींचने से बचाया! वर्थ नोटिंग कि एनीमेशन के चलने के बाद आपके तत्व गायब हो सकते हैं।

— टेक्लेट जूल

21

_{चूंकि प्रासंगिक दस्तावेज किसी ने संदर्भित नहीं किए हैं:}

CSS ट्रांसफ़ॉर्म मॉड्यूल स्तर 1 - शब्दावली - ट्रांसफ़ॉर्मेबल तत्व

एक परिवर्तनीय तत्व इन श्रेणियों में से एक में एक तत्व है:

एक तत्व जिसका लेआउट सीएसएस बॉक्स मॉडल द्वारा शासित होता है जो या तो एक ब्लॉक-स्तर या परमाणु इनलाइन-स्तरीय तत्व है , या जिसकी प्रदर्शन संपत्ति तालिका-पंक्ति, तालिका-पंक्ति-समूह, टेबल-हेडर-समूह, टेबल-पाद के लिए गणना करती है -ग्रुप, टेबल-सेल या टेबल-कैप्शन

एसवीजी नामस्थान में एक तत्व और सीएसएस बॉक्स मॉडल द्वारा नियंत्रित नहीं किया गया है जिसमें विशेषताएँ रूपांतरित होती हैं, 'patternTransform' या gradientTransform।

आपके मामले में, <a>तत्व inlineडिफ़ॉल्ट रूप से हैं।

तत्वों को परमाणु इनलाइन-स्तरीय तत्वों के रूप में प्रदान displayकरने के लिए संपत्ति का मूल्य बदलना , और इसलिए तत्व परिभाषा द्वारा "परिवर्तनशील" बन जाते हैं ।inline-block

li a {
   display: inline-block;
   -webkit-transform: rotate(10deg);
   -moz-transform: rotate(10deg);
   -o-transform: rotate(10deg); 
   transform: rotate(10deg);
}

जैसा कि ऊपर उल्लेख किया गया है, यह केवल -webkitआधारित ब्राउज़रों में लागू होता है क्योंकि यह IE / FF पर ध्यान दिए बिना काम करता है।

— जोश क्रोज़ियर
स्रोत

0

क्या आप विशेष रूप से केवल लिंक को घुमाने की कोशिश कर रहे हैं? क्योंकि LI टैग पर ऐसा करना ठीक काम करने लगता है।

स्नूक ट्रांसफॉर्म के अनुसार प्रभावित तत्वों को ब्लॉक होने की आवश्यकता होती है। अगर आपको इसे जोड़ने की परवाह है, तो भी उसे IE के लिए यह काम करने के लिए कुछ कोड मिलेंगे।

— र '
स्रोत

-4

-webkit-transform अब और जरूरत नहीं है

एमएस पहले से ही रोटेशन का समर्थन करते हैं ( -ms-transform: rotate(-10deg);)

इसे इस्तेमाल करे:

li a {
   ...

    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -sand-transform: rotate(10deg);
    display: block;
    position: fixed;
    }

— PDJ
स्रोत

1

आज मेरे परीक्षणों के दौरान, मैंने देखा कि -webkit-transformवास्तव में अब क्रोम की आवश्यकता नहीं थी। हालाँकि, यह अभी भी सफारी 8 में आवश्यक था।

— जॉन सेलर्स

क्या है -संद-परिवर्तन? Google की संक्षिप्त खोज से कुछ नहीं हुआ।

— पीट

गूगल 'सीएसएस सैंडपेपर' जो सवाल के लिए प्रासंगिक है और इससे चीजें आसान हो सकती हैं। यह एक हैक है जो IE के पुराने संस्करणों के लिए मानक सीएसएस रूपांतर के लिए समर्थन का समर्थन करता है

— पेड्रो जस्टो