Katakan Cinta Dengan Tampilan Gambar Efek Rotate

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

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