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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq-ih1nzU8V9MQKBykRGKddT3SkVU5zVb2spUtEdU-NAXXIvU1XVQ0mte6QEdHmvYe8Por4bY1FlMYAszJRZdxlmF0z2eINiO5SV9DrTFY5b-BMPsyIwQD_26qwCSac23yePXXPK8P0zoe/s320/mujeres-munecas-23132-13.jpg">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRJqe08LU26JE1faY17o4dbFy62jz6uSFUuVhWvCzUYoPVfmL4I0OGjEOCaSHlhHYYj9pMFwDMaWRWSkIqbyZWcJYTNi8PP9D_p-CObxIJUEzLyBO5TrMIjXq6ye9IKRzpLN-SUgNvwoSX/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-wxBxFN45ETQfubC8V4MTA6ye75d3blYrfhfH5KZY-bW0SoZQRTEYGRuRygeq63uWWFQ_G5sUdjwV3-Ue4LhwTiKio-hAd3EZrCErIJn5JTpbG93wsluZg7DA4zdsI6cWqDhgyBMRHTIn/s320/mujeres-munecas-23132-19.jpg">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPmhn5lcvZYF0v0U0Qw36RcSKT2brk8yPNDyBEeabIqBioBOs71cxoNv4MCu1s1f8S5h2rr78Fudbm4rPD0b23cFwq0pbipjVLUjGp-8pQk57BWpiAMulk9VMXMM9aMu7kEXOmzwb3W59/s320/mujeres-munecas-23132-12.jpg">
</div>
</div>
Keterangan: Untuk width dan hight maupun URL gambar silahkan sesuaikan sendiri.
DEMO:
