1.6.14
22
Katakan Cinta Dengan Tampilan Gambar Efek Rotate - Mengungkapkan rasa CINTA tidak harus dengan kata-kata, bisa juga kita katakan dengan perbuatan dan masih banyak lagi cara untuk katakan Cinta, bahkan Anda pernah melakukannya dengan pengorbanan mungkin, hehe..! karena hari ini, esok dan selamanya saya selalu cinta kepada semua rekan-rekan pecinta SAHABAT BLOGGER 77, ungkapan ini akan saya sampaikan dengan tampilan gambar efek rotate slide hover teks descripsi terspesial buat sahabat semua.

Efek Rotate pada tampilan gambar kali ini tidak jauh berbeda dengan tutorial sebelumnya tentang Membuat Efek Gambar 3D Dengan CSS Box Shadow. Style pada efek sama, namun tampilan gambar saya ubah pada model slide dengan CSS rotate3d, sehingga teks akan tertutup dengan gambar original default (gambar utama), sedangkan untuk menampilkan teks, saya menggunakan perintah cursor default hover dengan perpaduan transisi linear. Jika Anda Cinta SAHABAT BLOGGER 77, maka saya akan katakan Cinta melalui tombol DEMO SHOW dibawah ini




DEMO SHOW



lovely Image


Bagaimana.? romantis bukan ungkapan rasa cinta saya ini buat Anda, hehe..!!, tertarik ingin melakukan hal yang sama, berikut susunan HTML kodenya


<ul class="sb77-grid">
<li>
    <div class="sb77-item">
       <div class="sb77-info">
           <div class="sb77-info-front sb77-img-1">
       </div>
<div class="sb77-info-back">
      <h3>Teks Disini...</h3>
        <p>
Sahabat Blogger 77<a href="#">View on Website</a>
             </p>
</div>
    </div>
        </div>
</li>
</ul>


Untuk HTML diatas boleh Anda letakkan dalam selector wilayah widget sidebar blog Anda sebagai koleksi gambar, tetapi jika untuk gambar di postingan, letakkan pada mode tulis HTML bukan yang compose. Selanjutnya tambahkan CSS berikut sebelum kode ]]></b:skin> atau <style> pada Template blog Anda

.sb77-item {
   width: 100%;height: 100%;
   border-radius: 50%;
   position: relative;cursor: default;
   -webkit-perspective: 900px;
   -moz-perspective: 900px;
   -o-perspective: 900px;
   -ms-perspective: 900px;
   perspective: 900px;}

.sb77-info{
   position: absolute;
   width: 100%;height: 100%;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   transform-style: preserve-3d;}

.sb77-info > div {
   display: block;position: absolute;
   width: 100%;height: 100%;
   border-radius: 50%;
   background-position: center center;
   -webkit-transition: all 0.4s linear;
   -moz-transition: all 0.4s linear;
   -o-transition: all 0.4s linear;
   -ms-transition: all 0.4s linear;
   transition: all 0.4s linear;
   -webkit-transform-origin: 50% 0%;
   -moz-transform-origin: 50% 0%;
   -o-transform-origin: 50% 0%;
   -ms-transform-origin: 50% 0%;
   transform-origin: 50% 0%;}

.sb77-info .sb77-info-back {
   -webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
   -moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
   -o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
   -ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
   transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
   background: #000;
   opacity: 0;}

.sb77-img-1 {background-image: url(URL-gambar/love-1.jpg);}
.sb77-info h3 {
   color: #fff;text-transform: uppercase;
   letter-spacing: 2px;font-size: 44px;
   margin: 0 15px;padding: 50px 0 0 0;
   height: 110px;
   font-family: 'Open Sans', Arial, sans-serif;}

.sb77-info p {
   color: #fff;padding: 10px 5px;
   font-style: italic;margin: -2em 30px;
   font-size: 12px;
   border-top: 2px dotted rgba(255,255,255,0.5);}

.sb77-info p a {
   display: block;color: #fff;color: #ccc;
   font-style: normal;font-weight: 700;
   text-transform: uppercase;
   font-size: 9px;letter-spacing: 1px;
   padding-top: 4px;font-family: Helvetia;}

.sb77-info p a:hover {color: #fff222;color: magenta;}
.sb77-item:hover .sb77-info-front {
   -webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
   -moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
   -o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
   -ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
   transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
   opacity: 0;}

.sb77-item:hover .sb77-info-back {
   -webkit-transform: rotate3d(1,0,0,0deg);
   -moz-transform: rotate3d(1,0,0,0deg);
   -o-transform: rotate3d(1,0,0,0deg);
   -ms-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
   opacity: 1;}

.sb77-grid {
   margin: 20px 0 0 0;
   padding: 0;list-style: none;
   display: block;text-align: center;width: 100%;}

.sb77-grid:after,
.sb77-item:before {content: '';display: table;}
.sb77-grid:after {clear: both;}

.sb77-grid li {
   width: 220px;height: 220px;
   display: inline-block;margin: 15px;}



KETERANGAN...

Di setiap rangkaian kode diatas, sudah saya beri tanda dengan warna yang berbeda, silahkan Anda mengantinya dengan imajinasi Anda yang lebih keren lagi, dan akhir kata saya mengucapkan terimakasih dan semoga dapat bermanfaat.
Artikel terbaru - Cara Membuat Efek Remote Link Pada Gambar

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Katakan Cinta Dengan Tampilan Gambar Efek Rotate
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

22 komentar

  1. Balasan
    1. terbalas apanya neh

      Hapus
    2. means ... that you really like me...mwnya..! =p~,,, emot yg gigit mawar mana Dev..!

      Hapus
  2. Ini patut untuk dicoba ya mbak boleh nanti saya akan praktekan saja langsung hehe ..

    BalasHapus
  3. Mantap banget atampilan efek rotatenya. perlu di coba nich :)

    BalasHapus
  4. wah... keren banget bos...

    sangat cocok dipasang sbagai thumb post yia bos, hehehe...

    BalasHapus
    Balasan
    1. baiklah, anak buah!

      Hapus
    2. jika pada widget pop post, efek seperti ini digunakan sebagai pengganti tooltip bos..

      Hapus
    3. oh gitu yia, tooltip apaan sih bos?

      Hapus
    4. tooltip itu serangkaian teks pada sebuah objek sebelum objek tersebut di klik, jika pop post dengan thumb gambar biasanya ada descripsi singkat yang menerangkan link tersebut, namun pada tutorial ini descripsi tersebut saya gantikan dengan efek rotate, jadi sebelum objek tersebut diklik maka saat tersorot mouse tampilan objek akan berganti dengan descripsi teks seperti diatas

      Hapus
  5. weisszz, mantep banget nih Mbak Devy.
    terus, saya masih relevan nggak ya pake ginian?

    BalasHapus
  6. wah bagus banget efeknya dan tentunya yang lebih saya suka adalah tidak menggunakan javascript

    BalasHapus
  7. aku cinta kamu meski harus jungkir balik. hehe makin kreatif aja mbk Defy

    BalasHapus
  8. bagus bagus he he tapi kira kira menambah berat loading ndak ya

    BalasHapus
  9. Waah keren juga nih, jadi lebih atraktif dan dinamis tentunya itu jadi memukau, saya coba dulu kalau gitu.

    BalasHapus
  10. lha ini yang namanya kreatif bisa mengungkapkan cinta dengan gambar...

    BalasHapus
  11. asyik juga ya ngeblog bisa sambil mengugkapkan cinta :D

    BalasHapus
  12. Ini yang dimaksud css rotate itu ya Mbak...?
    Saya belum ngerti demonya. Ketika disorot gambarnya berubah. Kalau tanpa disorot mouse, gambar bisa berubah-ubah enggak ya Mbak seperti di blogku yang dari kompas itu... :)

    BalasHapus
    Balasan
    1. untuk menampilkan sesuatu dalam satu area objek,bukan hanya dengan rotate efek mas, rotate dikatakan karena efek yang tampil dari atas menggulung kebawah (rotasi) dengan perintah hover, jadi efek akan tampil saat mouse melintasi objek,

      sedangkan untuk membuat gambar yang berubah-ubah tanpa perintah mouse, kita bisa gunakan transisi animasi dengan delay waktu pergantian gambar, jadi gambar akan berganti secara otomatis dengan jarak waktu delay yang sudah kita tentukan.
      contohnya lihat pada link ini

      http://sahabatblogger77.blogspot.com/2014/03/efek-slide-show-otomatis-pada-gambar.html

      Hapus
  13. memang benar-benar kreatif sekaliiiiiiii, saya salut dengan mbak devy

    BalasHapus
    Balasan
    1. terimakasih mas atas pujiannya, saya juga masih belajar kok mas, buktinya sampai saat ini template saya belum juga kelar dikerjakan,,hehe

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK