CSS का उपयोग करके बैकग्राउंड इमेज को कैसे फ्लिप करें?

Question

CSS का उपयोग करके किसी भी बैकग्राउंड इमेज को कैसे फ्लिप करें? क्या यह संभव है?

currenty मैं एक में इस तीर छवि का उपयोग कर रहा background-imageसे liसीएसएस में

On: visitedमुझे इस तीर को क्षैतिज रूप से फ्लिप करने की आवश्यकता है। मैं यह करने के लिए तीर की एक और छवि बना सकता हूं लेकिन मैं यह जानने के लिए उत्सुक हूं कि सीएसएस में छवि को फ्लिप करना संभव है:visited

Comments

अच्छा प्रश्न! यह कई अलग-अलग उदाहरणों में काम आ सकता है।

— अश्राद

@AshBrad - टिप्पणियों के लिए धन्यवाद। हाँ, यह कई स्थितियों में उपयोगी हो सकता है

— जितेंद्र व्यास

Answer 1

आप इसे सीएसएस के साथ क्षैतिज रूप से फ्लिप कर सकते हैं ...

a:visited {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

jsFiddle ।

यदि आप इसके बजाय लंबवत फ्लिप करना चाहते हैं ...

a:visited {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

स्रोत ।

Comments

अगर मैं केवल वेब-किट ब्राउज़र पर विचार कर रहा हूँ, तो क्या केवल -webkit-transform: scaleX(-1);इतना ही पर्याप्त है?

— जितेन्द्र व्यास

@ जितेंद्र यह होना चाहिए, साथ ही गैर विक्रेता उपसर्ग संपत्ति।

— एलेक्स

@alex - इसमें एक समस्या। यह उस टेक्स्ट को भी <a>फ़्लिप कर रहा है जो अंदर है और मैं केवल बैकग्राउंड इमेज को फ्लिप करना चाहता हूं। आपके द्वारा दिया गया कोड पूरे तत्व को फ्लिप करने के लिए है

— जितेंद्र व्यास

@ जितेंद्र ऐसा नहीं लग रहा है कि आप सिर्फ बैकग्राउंड इमेज को फ्लिप कर सकते हैं। आप आइकन को अंदर रख सकते हैं spanऔर फिर उसे फ्लिप कर सकते हैं।

— एलेक्स

@alex - ठीक है अगर मैं इस कोड का उपयोग करता हूं तो <li><a href="#"><span>text</span></a></li>यह टेक्स्ट को भी फ़्लिप कर रहा है, तो टेक्स्ट को अनफ़िलिप करने के लिए आपके दिए गए कोड के विपरीत क्या होगा ताकि मैं li a span { }css के लिए unflip कोड लिख सकूं

— Jitendra Vyas

Answer 2

मुझे एलेक्स के जवाब में फ्लिप करने के लिए एक सुराग देखने के बाद मुझे केवल पृष्ठभूमि नहीं पूरे तत्व को फ्लिप करने का तरीका मिला। धन्यवाद एलेक्स आपके उत्तर के लिए

एचटीएमएल

<div class="prev"><a href="">Previous</a></div>
<div class="next"><a href="">Next</a></div>

सीएसएस

.next a, .prev a {
    width:200px;
    background:#fff
}
 .next {
    float:left
}
 .prev {
    float:right
}
 .prev a:before, .next a:before {
    content:"";
    width:16px;
    height:16px;
    margin:0 5px 0 0;
    background:url(http://i.stack.imgur.com/ah0iN.png) no-repeat 0 0;
    display:inline-block 
}
 .next a:before {
    margin:0 0 0 5px;
    transform:scaleX(-1);
}

यहाँ उदाहरण देखें http://jsfiddle.net/qngrf/807/

Comments

@ जितेंद्र क्या आप Jsfiddle URL की जाँच कर सकते हैं। मुझे लगता है कि यह वही कोड नहीं है जो आपने अपने उत्तर में पोस्ट किया है + इसका काम नहीं कर रहा है ..

— sachinjain024

jsfiddle कोड आप पोस्ट करने के लिए पाठ फ्लिप है? क्या यह आप चाहते हैं, या सिर्फ पृष्ठभूमि छवि है?

— मांडजा

आपका jsfiddle कोड के समान नहीं है, क्या आप इसे अपडेट कर सकते हैं?

— रॉय नामी

2016 से @JitendraVyas का नमस्कार! मैं jsfiddle URL को ठीक करने के लिए एक संपादन का सुझाव देने पर विचार कर रहा था क्योंकि यह अभी भी आपके जवाब में अलग-अलग कोड से लिंक है - पोस्ट को संपादित करने या लिंक को हटाने के लिए देखभाल? धन्यवाद :)

— NotLizards

-webkit-transform:scaleX(-1);क्रोम के लिए

— वेस्ले स्मिथ

Answer 3

W3schools के अनुसार: http://www.w3schools.com/cssref/css3_pr_transform.asp

ट्रांसफ़ॉर्म प्रॉपर्टी इंटरनेट एक्सप्लोरर 10, फ़ायरफ़ॉक्स और ओपेरा में समर्थित है। Internet Explorer 9 एक वैकल्पिक, -ms-ट्रांस्फ़ॉर्म गुण (केवल 2D ट्रांसफ़ॉर्म) का समर्थन करता है। सफारी और क्रोम एक वैकल्पिक, -webkit- परिवर्तन संपत्ति (3 डी और 2 डी ट्रांसफॉर्म) का समर्थन करते हैं। ओपेरा केवल 2 डी ट्रांसफॉर्म का समर्थन करता है।

यह एक 2 डी रूपांतरण है, इसलिए इसे क्रोम, फ़ायरफ़ॉक्स, ओपेरा, सफारी और IE9 + पर विक्रेता के उपसर्गों के साथ काम करना चाहिए।

उपयोग किए गए अन्य उत्तर: आंतरिक सामग्री को फ़्लिप करने से रोकने से पहले। मैंने इसका इस्तेमाल अपने फूटर पर किया (अपने हेडर से इमेज को वर्टिकल-मिरर करने के लिए):

HTML:

<footer>
<p><a href="page">Footer Link</a></p>
<p>&copy; 2014 Company</p>
</footer>

सीएसएस:

footer {
background:url(/img/headerbg.png) repeat-x 0 0;

/* flip background vertically */
-webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
}

/* undo the vertical flip for all child elements */
footer * {
-webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
}

तो आप अंत में तत्व को फ़्लिप करते हैं और फिर अपने सभी बच्चों को पुनः फ़्लिप करते हैं। नेस्टेड तत्वों के साथ भी काम करता है।

Comments

जवाब के लिए धन्यवाद! इसने मेरे लिए सबसे अच्छा काम किया, क्योंकि दूसरों ने या तो सभी बच्चों को फ़्लिप किया या फ्लिप को उलटने के लिए अधिक जटिल चाल की आवश्यकता थी।

— ऑस्टिन सालगट

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

— ओनोसा

Answer 4

इसके लायक क्या है, गेको-आधारित ब्राउज़रों के लिए आप इस चीज़ को बंद नहीं कर सकते हैं :visitedजिसके परिणामस्वरूप गोपनीयता लीक हो सकती है। Http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistected/ देखें

Answer 5

आप एक ही समय में ऊर्ध्वाधर और क्षैतिज दोनों को फ्लिप कर सकते हैं

    -moz-transform: scaleX(-1) scaleY(-1);
    -o-transform: scaleX(-1) scaleY(-1);
    -webkit-transform: scaleX(-1) scaleY(-1);
    transform: scaleX(-1) scaleY(-1);

और संक्रमण संपत्ति के साथ आप एक शांत फ्लिप प्राप्त कर सकते हैं

    -webkit-transition: transform .4s ease-out 0ms;
    -moz-transition: transform .4s ease-out 0ms;
    -o-transition: transform .4s ease-out 0ms;
    transition: transform .4s ease-out 0ms;
    transition-property: transform;
    transition-duration: .4s;
    transition-timing-function: ease-out;
    transition-delay: 0ms;

वास्तव में यह पूरे तत्व को प्रवाहित करता है, न कि केवलbackground-image

SNIPPET

function flip(){
	var myDiv = document.getElementById('myDiv');
	if (myDiv.className == 'myFlipedDiv'){
		myDiv.className = '';
	}else{
		myDiv.className = 'myFlipedDiv';
	}
}

#myDiv{
  display:inline-block;
  width:200px;
  height:20px;
  padding:90px;
  background-color:red;
  text-align:center;
  -webkit-transition:transform .4s ease-out 0ms;
  -moz-transition:transform .4s ease-out 0ms;
  -o-transition:transform .4s ease-out 0ms;
  transition:transform .4s ease-out 0ms;
  transition-property:transform;
  transition-duration:.4s;
  transition-timing-function:ease-out;
  transition-delay:0ms;
}
.myFlipedDiv{
  -moz-transform:scaleX(-1) scaleY(-1);
  -o-transform:scaleX(-1) scaleY(-1);
  -webkit-transform:scaleX(-1) scaleY(-1);
  transform:scaleX(-1) scaleY(-1);
}

<div id="myDiv">Some content here</div>

<button onclick="flip()">Click to flip</button>

Comments

"एक ही समय में ऊर्ध्वाधर और क्षैतिज दोनों फ्लिप करें" का एक ही प्रभाव होता है क्योंकि छवि 180 डिग्री पर मुड़ जाती है, ठीक काम करती है और वही है जिसकी मुझे तलाश थी,

— स्टोनक्रूशर