Selamat malam...! dimalam minggu yang penuh suka cita ini saya akan berbagi trick yang lumayan keren yaitu
Membuat efek gambar 3D Flip dengan CSS sebuah gambar tanpa CSS mungkin bisa dibilang seperti wanita tanpa make up. Hahahaa..
Maka berikut adalah tutorialnya untuk
Membuat efek gambar 3D Flip dengan CSS dipostingan blog:
BERIKUT INI TUTORIALNYA
1. Login ke akun
blogger.com
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 supaya muncul dipostingan blog, silahkan buat
Entri Baru menggunakan mode
HTML kemudian masukkan kode berikut ini kedalam halaman postingan blog.
<div class="flip" style="width: 540px; height: 300px; display: inline-block;">
<div class="rotate x">
<img src="http://3.bp.blogspot.com/-
JtAo0yaHM8M/U3K7MIVhH8I/AAAAAAAABX4/HcWDCNsTsK4/s1600/BIE_Demo-1.jpg">
<img src="http://1.bp.blogspot.com/-
eohNw0MxwoM/U3K7nH3UnAI/AAAAAAAABYM/V3PnJ13qgrY/s1600/BIE_Demo-4.jpg">
</div>
</div>
</br></br>
<div class="flip" style="width: 540px; height: 300px; display: inline-block;">
<div class="rotate y">
<img src="hhttp://3.bp.blogspot.com/-
CDOjGI6mRdk/U3K7a2eDmyI/AAAAAAAABYA/zOYG6Hm_aCs/s1600/BIE_Demo-2.jpg">
<img src="http://2.bp.blogspot.com/-
ThgyZX7Ws48/U3K7nCp_9BI/AAAAAAAABYI/_LkJ4byoD2U/s1600/BIE_Demo-3.jpg">
</div>
</div>
Keterangan :
Untuk widht dan hight maupun URL gambar silahkan sesuaikan sendiri sesuai selera Anda.
Blogger
Google+
Facebook
Twitter