Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Efek 3D Rotate Pada Gambar di Blog

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="http://1.bp.blogspot.com/-6vq5puiwlwo/UdB4VN674mI/AAAAAAAAFcY/23r1acrAMdM/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:
faceblog evolutions Contact Form Kontak komunikasi langsung dengan admin blog http://mas-andes.blogspot.com melalui email.
faceblog evolutions Blogging Tips trik dan panduan serta tutorial blogger tingkat dasar sampai mahir.
faceblog evolutions SEO Teknik dan taktik serta strategi SEO tingkat dasar sampai mahir.
faceblog evolutions CSS & jQuery Tutorial CSS & jQuery panduan desain blog tingkat dasar sampai mahir.
faceblog evolutions Sitemap Daftar isi artikel posting lengkap di blog http://mas-andes.blogspot.com
faceblog evolutions Home Selamat datang di http://mas-andes.blogspot.com Terimakasih telah berkunjung.

Berlangganan artikel via email

14 Response to "Membuat Efek 3D Rotate Pada Gambar di Blog"

Wah bisa dijadiin sebagai pengganti menu utama nih. Manteb nya lagi bisa pakai deskripsi pula! Bravo buat tutorial nya mas. :)

Balas

hahaha.. keren ya
bikinin banner dong #ngarep :D

Balas

Selamat sore sob, terimahkasih infonya saya mohon dukungannya disni sob dan berikan komentar gan G+nya sob thanks..

Balas

kalau Braso...lebih mengkilat ya mas...hehe :)

Balas

ini dia yg ...cara yg udah lama sy cari mas
izin...gondol bawa pulang ya... hehe
keren keren... :)

Balas

kunjungan pertama mas... moga bisa jalin silahturahmi...
happy blogging... akan slalu hadir mas...

Balas

mas terimakasih atas tutorialnya, saya ingin bertanya jika ingin membuat efek tersebut bekerja dengan rapi di gambar dengan ukuran 160x160 pixel bagaimana y, cara mengedit edit agar pas antara ukuran gambar dengan efek shadow informasinya, terimakasih banyak :)

Balas

width: 310px;
height: 100px;

ganti dengan ukuran yang di inginkan mas :)

Balas

saya sudah coba tapi terkesan acak-acakan T.T, bisa bantu, misalnya gambarnya ukuran 159x160 pixel gimana itu mas, minta pencerahannya, terimakasih :)

Balas

hehe biar lengkap css diatas ganti pake ini mas, untuk ukuran 160x160.

.kubus {
display: inline-block;
width: 160px;
height: 160px;
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: 160px;
-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: 140px;
width: 140px;
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";
}

Balas

ok mas terimakasih, mas mau tanya lagi bisa buatkan tutorial yang ini tidak? http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/comment-page-2/
lumayan buat memperkaya konten blog mas , terimakasih atas bantuannya ^_^

Balas

nanti mas nunggu waktunya :)

Balas

kalo mau nge-redirect ke link/halaman baru gimana yah ... ??
misal, kita klik gambar tersebut bisa kebuka halaman yg lain yg kita arahkan kesana

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Efek 3D Rotate Pada Gambar di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode