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

twilight saga asli
Gambar Asli
twilight saga eclipse flip horisontal
Flip Horisontal
twilight saga eclipse flip vertikal
Flip Vertikal
twilight saga eclipse flip horisontal vertikal
Flip Horisontal dan Vertikal

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

27 thoughts on “Cross Browser Image Flip With CSS

  • 9 August 2010 at 09:40
    Permalink

    Kalo gambar diputer sekian derajat, gimana Mas Hary?

    kaLo ga saLah pake style:
    -moz-transform:rotate(xdeg);
    -webkit-transform:rotate(xdeg);
    -o-transform:rotate(xdeg);
    nilai xdeg = besar rotasi, dari 1-360, misal 130deg
    kaLo untuk IE:
    progid:DXImageTransform.Microsoft.BasicImage(rotation=x);
    tapi rotasinya cuma bisa 1-4, yang mewakiLi 90, 180, 270, dan 360

    Reply

Leave a Reply to wardi Cancel reply