Gambar Latar Belakang Balik CSS Secara Vertikal & Horizontal

sukma
sukma
3 minute read

Pelajari cara membalik gambar latar belakang menggunakan CSS? Apa itu mungkin? Iya! Dengan menggunakan transform: scaleX(-1); elemen kita dapat dengan mudah membalikkan gambar.

Beberapa hari yang lalu, saya sedang mengerjakan sebuah proyek kecil yang membutuhkan untuk mengubah posisi ikon pada:visited. Saya menggunakan gambar panah di background-image di dalam li.

Saya perlu membalik panah ini secara horizontal. Ini dapat dengan mudah dilakukan dengan membuat gambar panah lain dan kemudian mengubahnya:visited tapi saya tidak suka itu.

Skenario yang mungkin terjadi adalah hanya memiliki satu grafik untuk sebuah "panah" tetapi membaliknya untuk menunjuk ke arah yang berbeda.

.flipped img {   transform: scaleX(-1); }

Tetapi masalah dengan properti transformasi tidak berfungsi dengan baik dengan vendor lama. Solusi untuk masalah ini sudah diawali.

.flipped img {   -webkit-transform: scaleX(-1);   -moz-transform: scaleX(-1);   -o-transform: scaleX(-1);   transform: scaleX(-1);   filter: FlipH;   -ms-filter: "FlipH"; }

Jika Anda ingin membalik secara vertikal…

.flipped img {     -moz-transform: scaleY(-1);     -o-transform: scaleY(-1);     -webkit-transform: scaleY(-1);     transform: scaleY(-1);     filter: FlipV;     -ms-filter: "FlipV"; }

Elemen CSS3 sangat kuat dan Anda dapat dengan mudah membuat efek menarik pada gambar. Anda dapat dengan mudah menyelesaikan masalah CSS yang rumit menggunakan beberapa baris kode.

Biasanya, kita telah melihat bahwa efek seperti flip hanya dapat dilakukan dengan menggunakan JavaScript tetapi dengan bantuan mengubah properti kita dapat dengan mudah melakukannya.

Cara Membalik Gambar Latar Belakang

Jadi kami dapat belajar bahwa kami dapat dengan mudah membalik gambar dengan menggunakan mengubah Properti. Dengan mengatur scaleX atau scaleY kita bisa membuatnya terbalik horizontal dan vertikal.

Sekarang mari terapkan properti untuk membalik gambar latar belakang. Saya akan membuat tombol sebelumnya / berikutnya dan kemudian menerapkan ikon latar belakang.

Di markup kami di bawah ini, kami punya flipprev dan flipnext. Keduanya mendefinisikan tautan jangkar sederhana.

<div class="flipprev">    <a href="https://codeconvey.com/css-flip-background-image/#">Previous</a> </div> <div class="flipnext">    <a href="https://codeconvey.com/css-flip-background-image/#">Next</a> </div>

Tulis CSS Styling

Untuk membuat demo terlihat bagus, saya akan mengatur warna latar belakang dan menentukan padding. Juga, mari tempatkan kedua div berdampingan dengan menggunakan elemen float.

.flipnext a, .flipprev a {     background:#fff;     padding: 10px 30px; }  .flipnext {     float:left; }  .flipprev {     float:right; }

Dengan bantuan :before elemen kita dapat dengan mudah mengatur ikon latar belakang untuk tetap di sebelah kiri teks tombol.

Anda perhatikan, saya menggunakan panah kanan di latar belakang yang berarti, saat ini posisi panah kedua ikon ada di sisi kanan.

Saya akan membalik ikon berikutnya ke sisi kiri ketika saya akan menerapkan properti transformasi pada langkah berikutnya dan terakhir.

 .flipprev a:before, .flipnext a:before {     content:"";     width:24px;     height:24px;     margin:0 5px 0 0;     background:url(right-arrow.png) no-repeat 0 0;     display:inline-block ;     vertical-align:middle; }

Akhirnya dan bagian terpenting terakhir untuk membalik ikon. Kami akan membalik ikon berikutnya dengan menggunakan transform:scaleX(-1);

.flipnext a:before {     margin:0 0 0 5px;     transform:scaleX(-1); }

Itu dia! Kami selesai. Lihat demo gambar latar belakang CSS flip dan unduh kode sumber.