Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Efek Gambar 3D Flip Dengan CSS

Efek Gambar 3D Flip Dengan CSS
Efek Gambar 3D Flip Dengan CSS – sebuah gambar tanpa CSS mungkin bisa dibilang seperti wanita tanpa make up. Sebuah gambar pada posting blog tanpa adanya tambahan kode CSS maka gambar tersebut akan terkesan murni dan tidak memiliki efek yang ditampilkan saat disentuh mouse atau yang biasa disebut onmouseover. Membuat efek hover pada gambar dipostingan blog sangat banyak dan bahkan beragam bentuk yang ditampilkan hanya dengan menggunakan tambahan kode CSS, dan salah satunya pada tutorial membuat Efek Gambar 3D Flip Dengan CSS ini. Salah satu fitur inovatif di CSS3 adalah kemampuan untuk memutar elemen HTML dalam ruang 3D. Kode CSS yang terdapat dibawah adalah menunjukkan bagaimana untuk memutar 2 sisi elemen, baik di X atau Y axis untuk mengungkapkan isi di sisi belakang gambar. Hanya dengan menyentuhkan mouse ke arah gambar maka melihat efek flip pada gambar akan terlihat dan ini tidak memerlukan banyak cara untuk proses menerapkannya. Supaya lebih mudah, maka berikut adalah tutorial untuk membuat Efek Gambar 3D Flip Dengan CSS di postingan blog:

1. Login ke akun blogger.
2. Klik Template > Edit HTML.
3. Cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.
4. Taruh kode berikut ini tepat diatas kode ]]></b:skin>
div.flip{
position:relative;
width: 300px;
height: 250px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}
div.flip div.rotate{
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transition: all 0.6s ease-in-out 0.3s;
-webkit-transition: all 0.6s ease-in-out 0.3s;
-o-transition: all 0.6s ease-in-out 0.3s;
transition: all 0.6s ease-in-out 0.3s;
}
div.flip div.rotate > *{
position:absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
div.flip div.rotate > div{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px;
background: #eee;
}
div.rotate.x *:nth-child(2){
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
div.flip:hover > div.rotate.x{
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
div.rotate.y *:nth-child(2){
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
div.flip:hover > div.rotate.y{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
5. Untuk memanggil kode diatas muncul di posting blog, silahkan Buat Entri Baru menggunakan mode HTML kemudian masukan kode diberikut ini kedalam halaman posting blog.
<div class="flip" style="width: 540px; height: 300px; display: inline-block;">
<div class="rotate x">
 <img src="http://2.bp.blogspot.com/-BrEkDxr2EfY/UWA4vPvCwpI/AAAAAAAAEAU/s8oqlJBAsr4/s320/mujeres-munecas-23132-13.jpg">
 <img src="http://2.bp.blogspot.com/-5lEdSo_vJ9s/UWA4vCBcM4I/AAAAAAAAEAg/VWzGtN5acg0/s320/mujeres-munecas-23132-23.jpg">
</div>
</div>
</br></br>
<div class="flip" style="width: 540px; height: 300px; display: inline-block;">
<div class="rotate y">
 <img src="http://1.bp.blogspot.com/-DAo0vLuVFuM/UWA4urkXXKI/AAAAAAAAEAI/IUuV2qTLdO4/s320/mujeres-munecas-23132-19.jpg">
 <img src="http://4.bp.blogspot.com/-eNBnvPo_ElA/UWA4vKCHfbI/AAAAAAAAEAQ/KL_CZoqcvZ4/s320/mujeres-munecas-23132-12.jpg">
</div>
</div>
Keterangan: Untuk width dan hight maupun URL gambar silahkan sesuaikan sendiri.


DEMO:



Berlangganan artikel via email

30 Response to "Efek Gambar 3D Flip Dengan CSS"

.: Tutorial yg sangat menarik kawan, patut dicoba...^_^

Balas

wah berarti selama ini aku ga pake make up dong..?
belajar lipstikan ah..
hehe

Balas
avatar
Anonymous

Jadi lebih interaktif bila blog gambar yang ada di postingan diberi sentuhan efek css.. langsung dicoba nih mas..

Balas

bagus gan. jd keliatan atraktif bgt

Balas

Bagus sekali kawan, tapi kode css nya kok banyak sekali yah, kalau disingkat atau dipermudah gimana yah apa bisa
terima kasih tutorialnya

Balas

css nya bisa di compres mas...
biar gag berat kalau dipake
ashare-xp.blogspot.com

Balas

waduh pingin nyobak ce tapi blog ku dah berat

Balas

Nice tutorial... I'll try it later

Balas

keren sobat tutornya makasih sudah berbagi

Balas

Mantep soB. Yang penting ringan loadnya. hehe

Balas

Mantap gan,... ijin nyimak dan ijin mencobanya,.. salam kenal gan,...

Balas

Bagus sekali, ingin saya mencobanya.

Balas

lihat demonya keren juga mas, izin copas kodenya y, terima kaish tutorialnya mas

Balas

silahkan kawan selamat mencoba dan terimakasih kunjungannya :)

Balas

hahay ada2 aja mas Rawins..
terimakasih sudah berkunjung mas :)

Balas

mungkin ingin mencoba dan bisa bermanfaat buat mempercantik blog, boleh di praktekkan sekarang juga :) terimakasih kunjungannya mas,

Balas

walaupun sederhana tidak ada salhanya jika mau mencoba gan.
terimakasih sudah berkunjung :)

Balas

bisa saja jika hanya ingin menggunakan salah satu efek, silahkan hapus pada div.rotate yang x atau y om. jadi gambar hanya akan menampilkan salah satu dari efek yang ingin digunakan saja.
terimakasih kunjungannya :)

Balas

silahkan di compres sendiri mas biar lebih ringan.
terimakasih sudah berkunjung :)

Balas

silahkan jika ingin mencoba itung2 buat pembelajaran saja mas.
terimakasih kunjungannya :)

Balas

please if you want to try ..
thanks for visiting :)

Balas

sama sobat .. terimakasih kunjungannya :)

Balas

iya mas gak berat juga kog pake efek flip ini, silahkan dicoba saja.
terimakasih kunjungannya :)

Balas

silahkan dicoba gan,salam kenal juga.
terimakasih kunjungannya :)

Balas

silhakan gan tidak ada salahnya untuk mencoba.
terimakasih kunjungannya :)

Balas

sama2.. iya silahkan mas semoga bermanfaat.
terimaksih kunjungannya :)

Balas

Sama sama sobat, saya juga sedang belajar disini, masih banyak yg belum saya ketahui soal kode Css, tapi syukurlah setidaknya menambah pengetahuan walaupun saya masih lamban. terima kasih sobat

Balas

Mantap bro tutorialnya... thanks sharenya ya...

Balas

terima kasih petunjuknya

Balas

cantik euhhh...

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Efek Gambar 3D Flip Dengan CSS" ini bermanfaat, share ke jejaring sosial.
Konversi Kode