Cross Browser Image Flip With CSS

July 19th 2010 | Posted by Hari Mulya

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.

Incoming Search Terms:

gambar browser, 10 macam web browser, macam-macam browser dan gambarnya, macam web browser, 10 contoh web browser, macam - macam web browser, contoh-contoh web browser, 10 macam browser, macam-macam browser internet, nama asli pemain twilight, macam-macam web browser beserta gambarnya

Related Posts

26 Responses to “Cross Browser Image Flip With CSS”

ighh Hari tega.. kasian Dy disuruh jungkir balik

tenang aja, Bun.. aku udah bayar royaLtinya… :dance:

[Reply]

untung bukan fotonya Bundo yang dibikin jungkir balik

[Reply]

[...] This post was mentioned on Twitter by Hari Mulyanto, Hari Mulyanto. Hari Mulyanto said: Cross Browser Image Flip With CSS http://goo.gl/fb/MBn5Q [...]

jurusnya bagus ya sob…mantaf… :) >- :-j

[Reply]

cerdas tenan arek iki

*iya fotoku di top komentator jadi kebalik gt.. :mrgreen:

[Reply]

Tutorialnya mantap banget..

[Reply]

Bang Iwan | July 19th, 2010 at 14:58

makasih banyak.
Salam hangat dan sukses selalu.

[Reply]

Jangan2 foto Top Komennya nanti jungkir ginian juga.

[Reply]

Mantabb… *cap jempol*

[Reply]

bundadontworry | July 19th, 2010 at 17:12

ikut2an Ram…………….
Mantabb * …..cap jempol*
(ini komen asli copas) :D
salam

[Reply]

nanti kalau mau pasang foto terbalik gitu, minta tolong Hari aja akh, boleh kah ? :)
salam

[Reply]

pasti boleh ya ri…………. :dance: :dance:

(si bunda sok ke ge-er an)
salam

[Reply]

liat gambar pertama spt kenal, tp gambar berikutnya kok yg cewe jd berubah :D

[Reply]

Photoshop bisa bangkrut kiye :D

[Reply]

hohoho.. bisa juga ya CSS dibuat kreasii :)

[Reply]

bgus tuh bos, tapi aku belum berani main coding

salam kenal Y bos

[Reply]

Ikut kebalikkkkkk, muka saya kok jadi ada stempel CSS na mas hari..

mantap kerennnn

salam saya

[Reply]

SAYA HANYA BISA BENGONG…SEBUAH PENGALAMAN BARU

HAHAHAHA

ASYIK PATUT DICOBA :dance:

[Reply]

untung selama ini fotoku gak pernah dipajang. Menghindari tangan-tangan jahil seperti sampeyan inih :evil:

[Reply]

:roll: yayayayay…Heny cobaaaaaaaa

Mudah2n bisa [-O<

Salam kenaaaaal :-j

[Reply]

bentar,, masih pemula saya mas, agak bingung. hehe

[Reply]

yang saya heran dari gambar kedua yang perempuanya kok rubah, apa ada ya CSS yang bisa rubah muka orang :D
salam hangat kang Hari :)

[Reply]

Tapi tipsnya oke kang makasih sharingnya :)

[Reply]

salam, ada tips baru nih

[Reply]

ada tips baru coba ah

[Reply]

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:

Name (required):
Mail (will not be published) (required):
Website:
Comment (required):