Cross Browser Image Flip With CSS
Sebenarnya jika kita menginginkan sebuah gambar terbaLik, akan lebih mudah menggunakan software image processing semacam Adobe Photoshop, GIMP, ACDSee, Microsoft Office Picture Manager, atau bahkan hanya dengan Paint. Tetapi jika gambar yang hendak kita baLik itu berjumLah banyak, atau kita ambiL langsung dari situs lain tanpa editing, CSS lah yang harus turun tangan. Untuk membaLik gambar menggunakan css, cara yang diLakukan adaLah dengan menambahkan beberapa styLe pada tag img. Jurus CSS ini mampu berjaLan dengan sempurna di Firefox, Safari, Chrome, Opera, dan Internet Explorer
Flip Horisontal
<img src="gambar-asli.jpg" alt="gambar asli" title="Gambar Asli" style="-moz-transform: scaleX(-1);-webkit-transform: scaleX(-1); -o-transform: scaleX(-1);transform: scaleX(-1); filter: fliph;"/>
Flip Vertikal
<img src="gambar-asli.jpg" alt="gambar flip horisontal" title="Gambar Flip Horisontal" style="-moz-transform: scaleY(-1);-webkit-transform: scaleY(-1); -o-transform: scaleY(-1); transform: scaleY(-1); filter: flipv;"/>
Flip Horisontal dan Vertikal
<img src="gambar-asli.jpg" alt="gambar flip horisontal dan vertikal" title="Gambar Flip Horisontal dan Vertikal" style="-moz-transform: scaleX(-1) scaleY(-1); -webkit-transform: scaleX(-1) scaleY(-1); -o-transform: scaleX(-1) scaleY(-1); transform: scaleX(-1) scaleY(-1); filter: fliph flipv;"/>
* Tested On : Firefox v4.0 Beta 1, Safari v5.0, Chrome v4.1, Opera v10.60, Internet Explorer v8.0
* Walaupun contoh gambarnya agak aneh :D, tapi berani sumpah, trik ini manjur untuk membaLik gambar. Kalau tetap tak percaya, siLahkan jadi top komentator, niscaya gravatar sahabat akan terbaLik.
ighh Hari tega.. kasian Dy disuruh jungkir balik
untung bukan fotonya Bundo yang dibikin jungkir balik
Pingback: Tweets that mention Cross Browser Image Flip With CSS | Hari Mulya -- Topsy.com
jurusnya bagus ya sob…mantaf… :)>- :-j
cerdas tenan arek iki
*iya fotoku di top komentator jadi kebalik gt..
Tutorialnya mantap banget..
makasih banyak.
Salam hangat dan sukses selalu.
Jangan2 foto Top Komennya nanti jungkir ginian juga.
Mantabb… *cap jempol*
ikut2an Ram…………….
Mantabb * …..cap jempol*
(ini komen asli copas) 😀
salam
nanti kalau mau pasang foto terbalik gitu, minta tolong Hari aja akh, boleh kah ? 🙂
salam
pasti boleh ya ri…………. :dance: :dance:
(si bunda sok ke ge-er an)
salam