CSS kullanarak arka plan resmi nasıl çevrilir?


225

CSS kullanarak herhangi bir arka plan resmi nasıl çevrilir? Mümkün mü?

currenty Ben bu ok görüntüsünü kullanıyorum background-imageait licss içinde

resim açıklamasını buraya girin

Açık: visitedBu oku yatay olarak çevirmem gerekiyor. Bunu okun başka bir görüntüsünü yapmak için yapabilirim AMA sadece CSS'deki görüntüyü çevirmenin mümkün olduğunu bilmek istiyorum:visited


3
iyi soru! bu birçok farklı durumda işe yarayabilir.
AshBrad

@AshBrad - Yorumlar için teşekkürler. evet birçok koşulda yararlı olabilir
Jitendra Vyas

Yanıtlar:


235

CSS ile yatay olarak çevirebilirsiniz ...

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

jsFiddle .

Bunun yerine dikey olarak çevirmek istiyorsanız ...

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

Kaynak .


1
Yalnızca Web kiti tarayıcılarını düşünürsem sadece -webkit-transform: scaleX(-1);yeterli olur mu?
Jitendra Vyas

@Jitendra Ayrıca, satıcı olmayan ön ekli özellik olmalıdır.
alex

25
@alex - bunda bir sorun var. İçindeki metni de çeviriyor <a>ve sadece arka plan resmini çevirmek istiyorum. Verdiğiniz kod tüm elemanı çevirmek
Jitendra Vyas

3
@Jitendra Arka plan resmini çevirebileceğiniz gibi görünmüyor. spanBununla birlikte , simgeyi a'ya yerleştirip çevirebilirsiniz.
alex

1
@alex - Tamam ben bu kodu kullanırsanız <li><a href="#"><span>text</span></a></li>metin de saygısız yani ne li a span { }css için unflip kodu yazabilirsiniz böylece metnin unflip kod yazmak için vermek kodu tersi olacak
Jitendra Vyas

86

Alex'in cevabını çevirmek için bir ipucu gördükten sonra sadece arka planı bütün unsuru çevirmenin yolunu buldum. Cevabınız için teşekkürler alex

HTML

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

CSS

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

Buradaki örneğe bakın http://jsfiddle.net/qngrf/807/


7
@Jitendra Jsfiddle URL'sini kontrol edebilir misiniz? Ben cevabında yayınlanan aynı koda sahip olmadığını düşünüyorum + onun çalışmıyor ..
sachinjain024

3
Gönderdiğiniz jsfiddle kodu metin saygısız mı? istediğin şey mi yoksa sadece arka plan resmi mi?
mandza

1
senin jsfiddle kodu ile aynı değil, u güncelleyebilir misiniz?
Royi Namir

1
@JitendraVyas 2016'dan merhaba! Ben hala burada cevabınızdakinden farklı bir koda bağlantı olarak jsfiddle URL düzeltmek için bir düzenleme önermek düşünüyordum - yazı düzenlemek veya bağlantıyı kaldırmak ister misiniz? Teşekkürler :)
totallyNotLizards

-webkit-transform:scaleX(-1);chrome için
Wesley Smith

19

W3schools'a göre: http://www.w3schools.com/cssref/css3_pr_transform.asp

Transform özelliği Internet Explorer 10, Firefox ve Opera'da desteklenir. Internet Explorer 9 alternatif bir -ms-transform özelliğini destekler (yalnızca 2B dönüştürmeler). Safari ve Chrome, alternatif bir -webkit-transform özelliğini (3D ve 2D dönüşümleri) destekler. Opera yalnızca 2B dönüştürmeleri destekler.

Bu bir 2D dönüşümdür, bu nedenle Chrome, Firefox, Opera, Safari ve IE9 + üzerinde satıcı önekleriyle çalışmalıdır.

Kullanılan diğer cevaplar: iç içeriği çevirmesini durdurmak için önce. Bunu altbilgimde kullandım (görüntüyü üstbilgimden dikey olarak yansıtmak için):

HTML:

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

CSS:

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

Böylece elementi çevirir ve sonra tüm çocuklarını tekrar çevirirsiniz. İç içe elemanlarla da çalışır.


1
Cevap için teşekkürler! Bu benim için en iyi şekilde çalıştı, çünkü diğerleri ya tüm çocukları çevirdi ya da ters çevirmek için daha karmaşık bir numaraya ihtiyaç duydu.
Austin Salgat

Bu yanıt hedeflediğiniz öğenin içindeki her şeyi çevirirse, onu başka bir öğeye itmeniz yeterlidir. Başka bir deyişle, yeni bir <div> öğesinin içine çevrilmesini istemediğiniz içeriği sarın.
Onosa


5

Hem dikey hem de yatay olarak aynı anda çevirebilirsiniz

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

Geçiş özelliği ile harika bir flip alabilirsiniz

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

Aslında çevirir bütün elemanı, sadecebackground-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>


"Dikey ve yatay aynı anda çevirmek" görüntüyü 180 derece döndürmekle aynı etkiye sahiptir, iyi çalışır ve aradığım şey budur,
Stonecrusher
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.