Membuat Efek 3D Rotate Pada Gambar di Blog

Membuat Efek 3D Rotate Pada Gambar di Blog – jika sebelumnya pada waktu lalu pernah membuat efek kubus berputar pada gambar di blog dengan menggunakan script jQuery maka sekarang efek gambar juga akan mempunyai efek 3D rotate dengan menggunakan kode CSS. Pada blog efek 3D ini dapat berfungsi seperti halnya dengan menu pada blog. Jika diberi link dan gambar yang sudah disesuaikan maka dapat pula digunakan sebagai menu utama. Tidak hanya terdapat gambar, melainkan dibalik gambar dapat disisipkan deskripsi atau informasi mengenai gambar tersebut dan pada deskripsi masih bisa juga disisipkan link sehingga pada gambar bisa terdiri dari beberapa link yang dapat mengarahkan pengunjung kedalam beberapa halaman konten yang terdapat dalam blog anda. Untuk mengetahui seperti apa hasilnya terlebih dahulu bisa dilihat pada demo, dan berikut adalah tutorial untuk cara Membuat Efek 3D Rotate Pada Gambar di Blog dengan sangat mudah.

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).

.kubus {
display: inline-block;
width: 310px;
height: 100px;
vertical-align: top;
margin: 1em 1.5em 2em 0;
cursor: pointer;
position: relative;
font-family: Tahoma, Arial;
-webkit-perspective: 4000px;
-moz-perspective: 4000px;
-ms-perspective: 4000px;
-o-perspective: 4000px;
perspective: 4000px;
}
.item {
height: 100px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform .6s;
-moz-transition: -moz-transform .6s;
-ms-transition: -ms-transform .6s;
-o-transition: -o-transform .6s;
transition: transform .6s;
}
.item:hover {
-webkit-transform: translateZ(-50px) rotateX(95deg);
-moz-transform: translateZ(-50px) rotateX(95deg);
-ms-transform: translateZ(-50px) rotateX(95deg);
-o-transform: translateZ(-50px) rotateX(95deg);
transform: translateZ(-50px) rotateX(95deg);
}
.item:hover img {
box-shadow: none;
border-radius: 15px;
}
.item:hover .information {
box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
border-radius: 3px;
}
.item img {
display: block;
position: absolute;
top: 0;
border-radius: 3px;
box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
-webkit-transform: translateZ(50px);
-moz-transform: translateZ(50px);
-ms-transform: translateZ(50px);
-o-transform: translateZ(50px);
transform: translateZ(50px);
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
}
.item .information {
display: block;
position: absolute;
top: 0;
height: 80px;
width: 290px;
text-align: left;
border-radius: 15px;
padding: 10px;
font-size: 12px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
box-shadow: none;
background: rgb(236,241,244);
background: -moz-linear-gradient(top,  rgba(236,241,244,1) 0%, rgba(190,202,217,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(236,241,244,1)), color-stop(100%,rgba(190,202,217,1)));
background: -webkit-linear-gradient(top,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
background: -o-linear-gradient(top,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
background: -ms-linear-gradient(top,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
background: linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecf1f4', endColorstr='#becad9',GradientType=0 );
-webkit-transform: rotateX(-90deg) translateZ(50px);
-moz-transform: rotateX(-90deg) translateZ(50px);
-ms-transform: rotateX(-90deg) translateZ(50px);
-o-transform: rotateX(-90deg) translateZ(50px);
transform: rotateX(-90deg) translateZ(50px);
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
}
.information strong {
display: block;
margin: .2em 0 .5em 0;
font-size: 20px;
font-family: "Oleo Script";
}

3. Klik Terapkan ke Blog.

Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Edit HTML lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.

4. Langkah selanjutnya klik Entri Baru, lalu copy markup HTML dibawah ini kemudian paste di kolom posting mode HTML.

<div class="kubus">
<div class="item">
<a href="URL HALAMAN" target="_blank"><img src="URL GAMBAR" /></a>
<span class="information">
<strong>JUDUL 1</strong> DESKRIPSI/INFORMASI
</span>
</div>
</div>
<div class="kubus">
<div class="item">
<a href="URL HALAMAN" target="_blank"><img src="URL GAMBAR" /></a>
<span class="information">
<strong>JUDUL 2</strong> DESKRIPSI/INFORMASI
</span>
</div>
</div>
<div class="kubus">
<div class="item">
<a href="URL HALAMAN" target="_blank"><img src="URL GAMBAR" /></a>
<span class="information">
<strong>JUDUL 3</strong> DESKRIPSI/INFORMASI
</span>
</div>
</div>
<div class="kubus">
<div class="item">
<a href="URL HALAMAN" target="_blank"><img src="URL GAMBAR" /></a>
<span class="information">
<strong>JUDUL 4</strong> DESKRIPSI/INFORMASI
</span>
</div>
</div>
<div class="kubus">
<div class="item">
<a href="URL HALAMAN" target="_blank"><img src="URL GAMBAR" /></a>
<span class="information">
<strong>JUDUL 5</strong> DESKRIPSI/INFORMASI
</span>
</div>
</div>
<div class="kubus">
<div class="item">
<a href="http://mas-andes.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWMvc9O_JcHt7JutXe6fK2Rtb7QOwnfuacTHcCNlBKKRTd2reRC9g2jtl0cBgCK5vbdRB49hfpGHa8185xGr5aCBDW2k6UUvTLhCg9IIyp3nrhdGkherba3fL5ZUXgOWODsDV8t-08676R/s310/Faceblog+Evolutions.jpg" /></a>
<span class="information">
<strong>Home</strong> Selamat datang di http://mas-andes.blogspot.com Terimakasih telah berkunjung.
</span>
</div>
</div>

Keterangan:
Dari kode markup HTML diatas, pada tulisan yang menggunakan HURUF KAPITAL silahkan diganti dengan keterangan yang ada. Sebagai contoh seperti pada kode baris akhir yang menggunakan warna merah.

DEMO:

Contact Form Kontak komunikasi langsung dengan admin blog http://mas-andes.blogspot.com melalui email.

Blogging Tips trik dan panduan serta tutorial blogger tingkat dasar sampai mahir.

SEO Teknik dan taktik serta strategi SEO tingkat dasar sampai mahir.

CSS & jQuery Tutorial CSS & jQuery panduan desain blog tingkat dasar sampai mahir.

Sitemap Daftar isi artikel posting lengkap di blog http://mas-andes.blogspot.com

Home Selamat datang di http://mas-andes.blogspot.com Terimakasih telah berkunjung.