क्या आप CSS का उपयोग मिरर / फ्लिप टेक्स्ट के लिए कर सकते हैं?

Question

क्या दर्पण पाठ के लिए CSS / CSS3 का उपयोग करना संभव है?

विशेष रूप से, मेरे पास यह कैंची चार "ically" ( ✂) है जिसे मैं बाईं ओर इंगित करना चाहता हूं और दाएं नहीं।

Comments

अगर किसी कारण से कैंची की छवि आपके लिए काम नहीं करती है, तो मैंने इसे% <और>%

— पीट विल्सन

इस धागे को देखें: stackoverflow.com/questions/3433641/… [1]: stackoverflow.com/questions/3433641/…

— लुकस वल

मिचेल का उत्तर अधिक सटीक है। क्या आप कृपया सही उत्तर को अपडेट कर सकते हैं? क्योंकि आपके द्वारा सही के रूप में चिह्नित किया गया उत्तर दर्पण नहीं है, लेकिन 180 डिग्री से रोटेशन है।

— साकेत साहू

@PeteWilson,? क्या ✂ चार इतना आम है? इसका क्या उपयोग है?

— पचेरियर

ध्यान रखें कि इमोजी कार्यान्वयन के आधार पर रोटेशन अलग है। सेब इमोजी सेट पर यह नीचे इंगित कर रहा है।

— अकुम्युलेटर

Answer 1

इसे प्राप्त करने के लिए आप CSS परिवर्तनों का उपयोग कर सकते हैं। एक क्षैतिज फ्लिप में इस तरह से div स्केलिंग शामिल होगी:

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);

और एक ऊर्ध्वाधर फ्लिप में इस तरह से div स्केलिंग शामिल होगी:

-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);

---

डेमो:

span{ display: inline-block; margin:1em; } 
.flip_H{ transform: scale(-1, 1); color:red; }
.flip_V{ transform: scale(1, -1); color:green; }

<span class='flip_H'>Demo text &#9986;</span>
<span class='flip_V'>Demo text &#9986;</span>

Comments

यह सही उत्तर होना चाहिए! (ऊर्ध्वाधर अक्ष के साथ दर्पण, क्षैतिज अक्ष के लिए स्केल (1, -1)

— एड्रियन

यह निश्चित रूप से उदासीन मानकों का अनुपालन करने वाला उत्तर है, दुर्भाग्य से हम ऐसी दुनिया में नहीं रहते हैं जहाँ यह वास्तव में अभी तक के सभी उपयोग मामलों के लिए काम करता है।

— क्रिस सोबोलेवस्की

क्या आप अपने उत्तर में वास्तविक ब्राउज़र उपसर्गों को अंतिम उपसर्ग के साथ शामिल कर सकते हैं? आपके द्वारा दिया गया CSS काम नहीं करता है।

— सेरेनो

@SerranoPereira वास्तव में, सुझाव के लिए धन्यवाद। उत्तर संशोधित किया गया।

— मेथोडिफिकेशन

ध्यान दें कि CSS ट्रांसफ़ॉर्म इनलाइन तत्वों जैसे फाउंडेशन के सुझाए गए <i> टैग पर काम नहीं करता है , जब तक कि आप भी तब डिस्प्ले नहीं देते हैं: इनलाइन-ब्लॉक।

— 1

Answer 2

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);

दो पैरामीटर एक्स अक्ष हैं, और वाई अक्ष, -1 एक दर्पण होगा, लेकिन आप अपनी आवश्यकताओं के अनुरूप किसी भी आकार को माप सकते हैं। उल्टा और पीछे की तरफ होगा (-1, -1)।

यदि आप 2011 में वापस क्रॉस ब्राउज़र समर्थन के लिए उपलब्ध सर्वोत्तम विकल्प में रुचि रखते हैं, तो मेरा पुराना उत्तर देखें ।

Comments

तकनीकी रूप से यह दर्पण नहीं है। यह घुमाया गया। तो यह केवल कुछ प्रकार के तत्वों के साथ काम

— करेगा

क्रोम में मेरे कुछ मुद्दे थे जब तक मैंने डिस्प्ले नहीं जोड़ा: इनलाइन-ब्लॉक टू माय स्पैन (पिक्टोस फोंट का उपयोग करना)

— क्लेरेंस लियू

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

— क्रिस सोबोलेवस्की

यह उत्तर गलत है, यह दर्पण नहीं है। यह केवल इस एक मामले में काम करता है क्योंकि उदाहरण में दिया गया प्रतीक लंबवत विषम है।

— gregtczap

हालाँकि यह अपने आप में उपयोगी है, यह पूछे गए सटीक प्रश्न का उत्तर नहीं है। मुझे यह सवाल एक खोज इंजन के माध्यम से मिला क्योंकि मैं एक छवि को क्षैतिज रूप से फ्लिप करना चाहता था। यह ओप्स कैंची की तरह सममित नहीं है।

— gillytech

Answer 3

असली दर्पण:

.mirror{
    display: inline-block; 
    font-size: 30px;

    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

<span class='mirror'>Mirror Text<span>

Comments

आपको हमेशा मानकों-अनुरूप (गैर-उपसर्गों वाली) संपत्ति को अंतिम रूप से रखना चाहिए , ताकि जब मानक किसी ब्राउज़र द्वारा अपनाया जाए, तो यह पूर्व-पुराने संस्करण (पुराने, बगियर) के बजाय मानकों-आधारित संस्करण का उपयोग करेगा। इस स्थिति में, इसका मतलब है "रूपांतरण: मैट्रिक्स (-1, 0, 0, 1, 0, 0)"; अंतिम संपत्ति होनी चाहिए । (

— इसको

मुझे नहीं पता कि यह सही उत्तर या प्रश्न पर होना चाहिए लेकिन मैं फ़ॉन्टवॉटर / बूटस्ट्रैप उपयोगकर्ताओं को इसके बारे में fa-flip-horizontalऔर fa-flip-verticalगुणों के बारे में जानना चाहता हूं

— lol

शानदार असली जवाब। हालांकि प्रदर्शन: ब्लॉक; जरूरी नहीं।

— गिली

हां ... प्रदर्शन: ब्लॉक; या इनलाइन-ब्लॉक की जरूरत है

— dGo

यह वास्तव में Y अक्ष के साथ घुमाए जाने पर किसी तत्व के बैकफेस के सही टेक्स्ट ओरिएंटेशन को बनाए रखने में सहायक था। पूर्व के लिए:backface-visibility: visible; transform-origin: center center; transform-style: preserve-3d; transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg) ;

— संसद

Answer 4

आप या तो उपयोगकर्ता कर सकते हैं

.your-class{ 
      position:absolute; 
      -moz-transform: scaleX(-1); 
      -o-transform: scaleX(-1); 
      -webkit-transform: scaleX(-1); 
      transform: scaleX(-1); 
      filter: FlipH;  
}

या

 .your-class{ 
  position:absolute;
  transform: rotate(360deg) scaleX(-1);
}

ध्यान दें कि सेटिंग positionकरना absoluteबहुत महत्वपूर्ण है! यदि आप इसे सेट नहीं करेंगे, तो आपको सेट करना होगा display: inline-block;

Answer 5

मैं इंटरनेट सहित दस्त द्वारा इस समाधान को एक साथ cobbled

• ढेर अतिप्रवाह उत्तर,
• MSDN लेख,
• http://css-tricks.com/almanac/properties/t/transform/ ,
• http://caniuse.com/#search=transform ,
• http://browserhacks.com/ , और
• http://www.useragentman.com/IETransformsTranslator/ ।

यह समाधान आवश्यक (IE6-8) का उपयोग करते हुए IE6 +, scale(-1,1)(उचित दर्पण) और उचित filter/ -ms-filterगुणों सहित सभी ब्राउज़रों में काम करने लगता है :

/* Cross-browser mirroring of content. Note that CSS pre-processors
  like Less cough on the media hack. 

  Microsoft recommends using BasicImage as a more efficent/faster form of
  mirroring, instead of FlipH or some kind of Matrix scaling/transform.
  @see http://msdn.microsoft.com/en-us/library/ms532972%28v=vs.85%29.aspx
  @see http://msdn.microsoft.com/en-us/library/ms532992%28v=vs.85%29.aspx
*/

/* IE8 only via hack: necessary because IE9+ will also interpret -ms-filter,
  and mirroring something that's already mirrored results in no net change! */
@media \0screen {
  .mirror {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(mirror=1)";
  }
}
.mirror {
  /* IE6 and 7 via hack */
  *filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
  /* Standards browsers, including IE9+ */
  -moz-transform: scale(-1,1);
  -ms-transform: scale(-1,1);
  -o-transform: scale(-1,1); /* Op 11.5 only */
  -webkit-transform: scale(-1,1);
  transform: scale(-1,1);
}

Answer 6

क्रॉस ब्राउज़र संगतता के लिए यह वर्ग बनाएं

.mirror-icon:before {
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

और इसे अपने आइकन वर्ग में जोड़ें, अर्थात

<i class="icon-search mirror-icon"></i>

बाईं ओर के हैंडल के साथ एक खोज आइकन पाने के लिए

Answer 7

इसे प्राप्त करने के लिए आप 'परिवर्तन' का उपयोग कर सकते हैं। http://jsfiddle.net/aRcQ8/

सीएसएस:

-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);

Answer 8

भी नहीं है rotateYकोई वास्तविक दर्पण एक के लिए:

transform: rotateY(180deg);

जो, शायद, और भी अधिक स्पष्ट और समझने योग्य है।

संपादित करें: हालांकि ओपेरा पर काम करने के लिए प्रतीत नहीं होता ... दुख की बात है। लेकिन यह फ़ायरफ़ॉक्स पर ठीक काम करता है। मुझे लगता है कि यह कहने के लिए आवश्यक है कि हम translate3dशायद किसी तरह का कर रहे हैं ? या कुछ इस तरह का।

Comments

सोच रहे लोगों के लिए यह एक 3 डी परिवर्तन है। मुझे लगता है कि यह निश्चित रूप से पहले दिए गए पैमाने और मैट्रिक्स तरीकों की तुलना में अधिक पठनीय / समझने योग्य है।

— 1

मैं यह नहीं देखता कि एक दर्पण कैसे घूमता है - यह केवल एक विशेष मामले में ऐसा प्रतीत होगा।

— सीएल तेज

@celsharp यह वाई अक्ष पर है, इसलिए आप छवि / तत्व को इसके पीछे से देखते हैं, इस प्रकार, प्रतिबिंबित।

— jeromej

Answer 9

बस क्षैतिज और ऊर्ध्वाधर दर्पण फ्लिप के लिए एक कामकाजी डेमो जोड़ना।

.horizontal-flip {
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.vertical-flip {
  -moz-transform: scale(1, -1);
  -webkit-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

<div class="horizontal-flip">
  Hello, World
  <input type="text">
</div>
<hr>
<div class="vertical-flip">
  Hello, World
  <input type="text">
</div>

Answer 10

यह वही है जो मेरे लिए काम करता है <span class="navigation-pipe">&gt;</span>

display:inline-block;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);

बस प्रदर्शन की जरूरत है: इनलाइन-ब्लॉक या घुमाने के लिए ब्लॉक। तो मूल रूप से पहला उत्तर अच्छा है। लेकिन -180 ने काम नहीं किया।

Answer 11

आप बॉक्स-रिफ्लेक्ट कर सकते हैं

box-reflect: 20px right;

देखें सीएसएस संपत्ति बॉक्स को प्रतिबिंबित अनुकूलता? अधिक जानकारी के लिए

Comments

बॉक्स-प्रतिबिंबित एक वेबकिट केवल संपत्ति है। लेकिन मुझे नहीं लगता कि इसके पास एक -मोज़-समतुल्य है .. इस पोस्ट की जाँच करें ..

— मिथुन

विभाजक भी :नहीं होना चाहिए;

— मिथुनसंशेश

Answer 12

सिर्फ एक और उदाहरण कि चरित्र को कैसे फ़्लिप किया जा सकता है। यदि आपको लोगों की आवश्यकता है, लेकिन वेंडर उपसर्गों को जोड़ें, लेकिन सभी आधुनिक ब्राउज़रों के लिए अविभाजित रूपांतरित संपत्ति का समर्थन है। ओपेरा मिनी मोड सक्षम होने पर एकमात्र अपवाद ओपेरा है (~ 3% विश्व उपयोगकर्ता)।

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Text rotation</title>
  <style type="text/css" media="screen">
    .scissors {
      display: inline-block;
      font-size: 50px;
      color: red;
    }
    .original {
      color: initial;
    }
    .flipped {
      transform: rotateZ(180deg);
    }
    .upward {
      transform: rotateZ(-90deg);
    }
    .downward {
      transform: rotateZ(90deg);
    }
  </style>
  
</head>
<body>
  <ul>
    <li>Original: <span class="scissors original">&#9986;</span></li>
    <li>Flipped: <span class="scissors flipped">&#9986;</span></li>
    <li>Upward: <span class="scissors upward">&#9986;</span></li>
    <li>Downward: <span class="scissors downward">&#9986;</span></li>
  </ul>
</body>
</html>

Answer 13

direction: rtl; शायद तुम क्या देख रहे हो।

Answer 14

यह 's7 स्ट्रोक आइकन' और 'फ़ॉन्ट-भयानक' जैसे फ़ॉन्ट आइकन के साथ ठीक काम करता है :

.mirror {
  display: inline-block;
  transform: scaleX(-1);
}

और फिर लक्ष्य तत्व पर:

<button>
  <span class="s7-back mirror"></span>
  <span>Next</span>
</button>