Membuat Efek 3D Rotate Pada Gambar di Blog

Info informasi Membuat Efek 3D Rotate Pada Gambar di Blog atau artikel tentang Membuat Efek 3D Rotate Pada Gambar di Blog ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

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/AVvXsEhOOsC2xTEGMJ1J52hdM9IvSxU7IrFRFXNXYR04_Nu18FwP65ID2dtXArkLoqia9iIj3j7K2V6Z4MX6Xhp0bBEU4aKwBtNsbY7AcZbDEvrpABp8bOb1WwCbFLZXft9yUsZKeDP5LadTjHi4/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.

Demikian artikel tentang Membuat Efek 3D Rotate Pada Gambar di Blog ini dapat kami sampaikan, semoga artikel atau info tentang Membuat Efek 3D Rotate Pada Gambar di Blog ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik