जावास्क्रिप्ट/सीएसएस के माध्यम से एचटीएमएल/छवि फ्लिप करने के लिए क्रॉस-ब्राउज़र तरीका?

Question

क्या कोई छवि फ़्लिप करने के लिए कोई लाइब्रेरी/सरल तरीका है? इस तरह

फ्लिप छवि:

AABBCC  CCBBAA 
AABBCC -> CCBBAA 

मैं एनिमेशन के लिए नहीं देख रहा हूँ, बस छवि फ्लिप।

मैंने कोई आविष्कार नहीं किया है और केवल एक जटिल संस्करण पाया है जो MozillaZine पर एसवीजी का उपयोग करता है, मुझे विश्वास नहीं है कि यह क्रॉस-ब्राउज़र काम करेगा।

Answer 1

निम्नलिखित सीएसएस आईई और आधुनिक ब्राउज़र में काम करेगा जो सीएसएस ट्रांसफॉर्म का समर्थन करते हैं। यदि आप इसे भी इस्तेमाल करना चाहते हैं तो मैंने एक वर्टिकल फ्लिप क्लास भी शामिल किया था।

.flip-horizontal { 
    -moz-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    -o-transform: scaleX(-1); 
    transform: scaleX(-1); 
    -ms-filter: fliph; /*IE*/ 
    filter: fliph; 
} 
.flip-vertical { 
    -moz-transform: scaleY(-1); 
    -webkit-transform: scaleY(-1); 
    -o-transform: scaleY(-1); 
    transform: scaleY(-1); 
    -ms-filter: flipv; /*IE*/ 
    filter: flipv; 
} 

Answer 2

कई reflection.js प्रकार पुस्तकालयों में से एक पर एक नजर डालें, वे बहुत सरल हैं। आईई में वे 'flipv' फ़िल्टर ले लेंगे और इसका उपयोग करेंगे, एक 'फ्लिप' फ़िल्टर भी है। अन्य ब्राउज़रों के अंदर, यह एक कैनवास टैग बनाएगा और drawImage का उपयोग करेगा। हालांकि एलियाह का जवाब संभवतः एक ही ब्राउज़र का समर्थन करता है।

Answer 3

यदि आप केवल पृष्ठभूमि छवि को फ़्लिप करना चाहते हैं तो आप फ़्लिप किए गए div के अंदर आंतरिक तत्वों पर कक्षा का उपयोग कर सकते हैं। असल में आप आंतरिक तत्वों को मुख्य div के साथ फ़्लिप कर रहे हैं, लेकिन उनमें से प्रत्येक को वापस फिसल रहे हैं। वैसे भी फ़ायरफ़ॉक्स में काम करता है।

इस तरह:

<div id="container" class="flip-horizontal"> <!-- container would have your background image --> 
<h3 class="flip-horizontal">Hello There!</h3> 
<p class="flip-horizontal">Here is some text</p> 
</div> 

Answer 4

बस इस सवाल का जवाब है, एक बग को ठीक करने की कोशिश करते हुए, जबकि सुझाव दिया जवाब सही है मैं ने पाया है कि यह सब विक्रेता नियमों के शामिल किए जाने के बारे में सबसे आधुनिक सीएसएस Linting नियम टूट जाता है ऊपर खोदा परिवर्तन के लिए। हालांकि, -एम-ट्रैनफॉर्म नियम सहित आईई 9 में एक अजीब बग का कारण बनता है जहां यह फ़िल्टर और -एमएस-ट्रांसफॉर्म नियमों को लागू करता है जिससे छवि फ्लिप हो जाती है और फिर से फ़्लिप हो जाती है।

.flip-horizontal { 
    -moz-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    -o-transform: scaleX(-1); 
    -ms-transform: scaleX(1); /* linting rule fix + IE9 fix */ 
    transform: scaleX(-1); 
    -ms-filter: fliph; 
    filter: fliph; 
} 
.flip-vertical { 
    -moz-transform: scaleY(-1); 
    -webkit-transform: scaleY(-1); 
    -o-transform: scaleY(-1); 
    -ms-transform: scaleY(1); /* linting rule fix + IE9 fix */ 
    transform: scaleY(-1); 
    -ms-filter: flipv; 
    filter: flipv; 
}