Bagaimana cara membalik gambar latar belakang menggunakan CSS?

224

Bagaimana cara membalik gambar latar belakang menggunakan CSS? Apa itu mungkin?

currenty Saya menggunakan panah gambar ini dalam background-imagedari lidi css

masukkan deskripsi gambar di sini

Hidup: visitedSaya perlu membalik panah ini secara horizontal. Saya dapat melakukan ini untuk membuat gambar lain dari panah TETAPI Saya hanya ingin tahu apakah mungkin untuk membalikkan gambar dalam CSS untuk:visited

Jitendra Vyas
sumber
3
Pertanyaan bagus! ini bisa berguna dalam banyak contoh berbeda.
AshBrad
@AshBrad - Terima kasih atas komentarnya. ya itu bisa berguna dalam banyak kondisi
Jitendra Vyas

Jawaban:

234

Anda dapat membaliknya secara horizontal dengan CSS ...

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

jsFiddle .

Jika Anda ingin membalik secara vertikal ...

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

Sumber .

alex
sumber
1
Jika saya hanya mempertimbangkan browser Web-kit maka hanya -webkit-transform: scaleX(-1);cukup?
Jitendra Vyas
@Jitendra Seharusnya, ditambah properti awalan non-vendor.
alex
25
@ alex - satu masalah dalam hal ini. itu membalik teks juga yang ada di dalam <a>dan saya hanya ingin membalik gambar latar belakang. Kode yang Anda berikan adalah membalik seluruh elemen
Jitendra Vyas
3
@Jitendra Sepertinya Anda tidak bisa membalikkan gambar latar belakang. Anda dapat menempatkan ikon di spandan kemudian membalikkannya.
alex
1
@ alex - OK jika saya menggunakan kode <li><a href="#"><span>text</span></a></li>ini membalik teks juga jadi apa yang akan bertentangan dengan kode memberi Anda untuk membuka teks sehingga saya dapat menulis kode buka untuk li a span { }di css
Jitendra Vyas
86

Saya menemukan cara saya untuk membalik hanya latar belakang tidak seluruh elemen setelah melihat petunjuk untuk membalikkan jawaban Alex. Terima kasih alex atas jawaban Anda

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

Lihat contoh di sini http://jsfiddle.net/qngrf/807/

Jitendra Vyas
sumber
7
@Jitendra Bisakah Anda memeriksa URL Jsfiddle. Saya pikir itu tidak memiliki kode yang sama yang Anda diposting di jawaban Anda + itu tidak berfungsi ..
sachinjain024
3
kode jsfiddle yang Anda posting adalah membalikkan teks ke? apakah itu yang Anda inginkan, atau hanya gambar latar belakang?
mandza
1
jsfiddle Anda tidak sama dengan kode, bisakah Anda memperbaruinya?
Royi Namir
1
@JitendraVyas halo mulai tahun 2016! Saya sedang mempertimbangkan menyarankan edit untuk memperbaiki URL jsfiddle karena masih terhubung ke kode yang berbeda dari yang ada di jawaban Anda di sini - apakah Anda mau mengedit posting atau menghapus tautan? Terima kasih :)
totallyNotLizards
-webkit-transform:scaleX(-1);untuk chrome
Wesley Smith
19

Menurut w3schools: http://www.w3schools.com/cssref/css3_pr_transform.asp

Properti transform didukung di Internet Explorer 10, Firefox, dan Opera. Internet Explorer 9 mendukung properti alternatif, -ms-transform (hanya transformasi 2D). Safari dan Chrome mendukung alternatif, properti -webkit-transform (transformasi 3D dan 2D). Opera hanya mendukung transformasi 2D.

Ini adalah transformasi 2D, sehingga harus berfungsi, dengan awalan vendor, di Chrome, Firefox, Opera, Safari, dan IE9 +.

Jawaban lain yang digunakan: sebelum menghentikannya membalik konten batin. Saya menggunakan ini pada catatan kaki saya (untuk secara vertikal-mirror gambar dari header saya):

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

Jadi Anda akhirnya membalik elemen dan kemudian membalik semua anak-anaknya. Bekerja dengan elemen bersarang juga.

jdforsythe
sumber
1
Terima kasih atas jawabannya! Yang ini bekerja paling baik untuk saya, karena yang lain membalik semua anak juga atau memerlukan trik yang lebih rumit untuk membalikkan flip.
Austin Salgat
Jika jawaban ini membalik semua bagian dalam elemen yang ditargetkan, tekan saja ke elemen lain. Dengan kata lain, bungkus konten yang tidak ingin Anda balik ke dalam elemen <div> baru.
Onosa
5

Anda dapat flip baik vertikal dan horizontal pada saat yang sama

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

Dan dengan properti transisi Anda bisa mendapatkan flip keren

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

Sebenarnya itu membalik seluruh elemen, bukan hanyabackground-image

POTONGAN

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>

Fi Ras
sumber
The "flip baik vertikal dan horizontal pada saat yang sama" memiliki efek yang sama seperti memutar gambar 180 derajat, berfungsi dengan baik dan apa yang saya cari,
Stonecrusher