Metni yansıtmak / ters çevirmek için CSS kullanabilir misiniz?

Metni yansıtmak için CSS / CSS3 kullanmak mümkün müdür?

Özellikle, ✂sağa değil sola işaret etmek istediğim “✂” ( ) makas makasım var .

Bunu başarmak için CSS dönüşümlerini kullanabilirsiniz. Yatay bir çevirme div'in aşağıdaki gibi ölçeklenmesini içerir:

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

Ve dikey bir çevirme div'i şu şekilde ölçeklendirmeyi içerir:

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

DEMO:

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>

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

İki parametre X ekseni ve Y ekseni, -1 bir ayna olacaktır, ancak ihtiyaçlarınıza uygun herhangi bir boyuta ölçeklendirebilirsiniz. Baş aşağı ve geri olur (-1, -1).

2011'de tarayıcılar arası destek için mevcut en iyi seçenekle ilgileniyorsanız, daha eski cevabımı inceleyin .

Gerçek ayna:

.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>

Siz de

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

veya

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

Bildirim ayarı o positionkadar absoluteçok önemlidir! Ayarlamazsanız, ayarlamanız gerekir display: inline-block;

Bu çözümü, internet de dahil olmak üzere,

• Yığın Taşması cevapları,
• MSDN makaleleri,
• http://css-tricks.com/almanac/properties/t/transform/ ,
• http://caniuse.com/#search=transform ,
• http://browserhacks.com/ ve
• http://www.useragentman.com/IETransformsTranslator/ .

Bu çözüm, IE6 + dahil olmak üzere tüm tarayıcılarda scale(-1,1)(uygun bir ayna) ve gerektiğinde uygun filter/ -ms-filterözellikleri (IE6-8) kullanarak çalışıyor gibi görünüyor :

/* 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);
}

Tarayıcılar arası uyumluluk için bu sınıfı oluşturun

.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);
}

Ve bunu simge sınıfınıza ekleyin, ör.

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

soldaki tutamaçla bir arama simgesi almak için

bunu başarmak için 'dönüşümü' kullanabilirsiniz. http://jsfiddle.net/aRcQ8/

css:

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

rotateYGerçek bir ayna için de var :

transform: rotateY(180deg);

Belki de daha açık ve anlaşılır.

EDIT: Ama ne yazık ki Opera üzerinde çalışmıyor gibi görünüyor. Ancak Firefox'ta iyi çalışıyor. Sanırım örtük bir şekilde translate3dbelki de bir çeşit iş yaptığımızı söylemek gerekebilir. Ya da böyle bir şey.

Yatay ve dikey ayna çevirme için çalışan bir demo ekliyoruz.

.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>

bu benim için işe yaradı <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);

sadece ekran gerekir: satır içi blok veya döndürmek için blok. Temel olarak ilk cevap iyidir. Ama -180 işe yaramadı.

Kutu yansıtmayı deneyebilirsiniz

box-reflect: 20px right;

bkz. CSS özellik kutusu yansıtma uyumluluğu? daha fazla ayrıntı için

Karakterin nasıl çevrilebileceğine bir örnek daha. Gerekiyorsa satıcı önekleri ekleyin, ancak şimdilik tüm modern tarayıcılar önceden düzeltilmemiş dönüştürme özelliğini desteklemektedir. Tek istisna Opera Mini modu etkinse Opera'dır (~% 3 dünya kullanıcısı).

<!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>

direction: rtl; muhtemelen aradığınız şeydir.

'S7 kontur simgeleri' ve 'font-awesome' gibi yazı tipi simgeleriyle iyi çalışır :

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

Ve sonra hedef öğede:

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