Membuat efek gambar 3D Flip dengan CSS

Hai sobat apa kabar? Di pagi yang cerah 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 tutorial untuk membuat Membuat efek gambar 3D Flip dengan CSS di postingan blog:

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

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 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiiubScEV_SwaDh8hkrik4ZRlZ37O3YurFb2YbhzF-xovYsoG6RqwWRxxfpDF2GK0Ojzod9uylxe7SMGw_2GC25oyPS6aFRzZManw8VRt02tjjjTR5MuyIBsNdDjzKSCRMZFNs3YOKJVaD/s1600/BIE_Demo-1.jpg">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4uHVJJKLqQT7TIH9JF4d_Ih0AtatyxrjigF4IAovmMY90ks0zY5sO0_gnq6eso1HlUym4j6puWT0NquARsmef0cBlUAHmxiYHTslJFLEJsg9sxj47VQJFLx9cUqyL2XFdy60vFuW6lqxT/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="hhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPnEogr10walXZ7bO7Z2c6aXriR5XKwRzeyJ0_jKQg-fjS9QQjRHfUY5Uacfy7RRiqsUY9yC1xTbAahPCP98k7_ewlTdd0x2dh9tTlcN0ciJVT1Plh3ZVfeWxqdRB7mFxO-jOfj8HMTPoV/s1600/BIE_Demo-2.jpg">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMTXwn1xLhh7zZ3SGgRUEJDoutD2bNQzcaG3n1HHlp3IewxLaJcNDrIgKISN9RiakbxzpAu_pOrPc11Q45ziSjRgLANgSOYZD3dZk0L3lU6vBX4zD359He2LRM3P7SKKPx5GZwYLSd_yFB/s1600/BIE_Demo-3.jpg">
</div>
</div> 

Keterangan:
Untuk width dan hight maupun URL gambar silahkan sesuaikan sendiri sesuai selera sobat.

DEMO nya seperti ini:

Membuat efek gambar 3D Flip dengan CSS 2014-05-08T01:25:00-07:00 Rating: 4.5 Diposkan Oleh: Unknown