Membuat Gambar Dengan Efek Flip Animasi - Jika Anda terjemahkan kata Flip dalam bahasa Indonesia berarti "Membalik". Memutar gambar dengan cara membalik posisi halaman depan untuk menampilkan atau melihat halaman belakang dengan durasi sekali putaran (180 derajat), cara seperti inilah yang disebut dengan efek "FLIP".

Tampilan gambar dan sistem kerja pada efek hampir sama dengan tutorial saya sebelumnya tentang Cara Membuat Animasi Teks Berputar Efek 3D, letak perbedaan hanya pada perintah kinerja efek. Sebagai tahap dasar, saya akan ilustrasikan tutorial kali untuk Membuat Gambar Dengan Efek Flip Animasi menggunakan kode CSS seperti ini:


.flip-container {
   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -o-perspective: 1000;
   perspective: 1000;
   border: 2px solid #39f;
   margin:-2em auto;}

//durasi efek 3D with transition
.flipper {
   -webkit-transition: 0.6s;
   -webkit-transform-style: preserve-3d;
   -moz-transition: 0.6s;
   -moz-transform-style: preserve-3d;
   -o-transition: 0.6s;
   -o-transform-style: preserve-3d;
   transition: 0.6s;
   transform-style: preserve-3d;
   position: relative;}

.pic {
   background: url(URL-gambar Anda.jpg) 0 0 no-repeat;
   z-index: 2;}




.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
  border: 2px solid #39f;
  margin:-2em auto;}

.flip-container:hover .flipper,
.flip-container.hover .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);}

.flip-container, .pic, .back {width: 220px;height: 327px;}
.flipper {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;
  -o-transition: 0.6s;
  -o-transform-style: preserve-3d;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;}

.pic, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;left: 0;}

.pic {
  background: url(http://2.bp.blogspot.com/-e8NEco0cCT0/VCZKdjE_nTI/AAAAAAAAA8c/88qhYCk6Eis/s328/Devy-Indriyani.jpg) 0 0 no-repeat;
  z-index: 2;}

.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background: #f8f8f8;}

.pic .about {
  font-size: 1em;
  display: inline-block;
  background: rgba(33, 33, 33, 0.9);
  color: #f8f8f8;
  font-family: Helvetia;
  padding: 5px 10px;
  border-radius: 5px;
  border:2px solid aqua;
  float:right;
  right:10px;
  bottom:15px;
  position:absolute;}
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
   <div class="flipper">
     <div class="pic">
       <span class="about">Devy Indriyani</span>
     </div>
   </div>
</div>

Devy Indriyani

Halaman Masih kosong, Lalu Hal apa yang akan Anda tampilkan "Di Sini" ?





Halaman dibalik gambar masih terlihat kosong, biasanya hal apa yang akan Anda tampilkan di sana?, sekedar membuat catatan singkat tentang memorandum yang berhubungan dengan gambar tersebut, atau saat ini Anda sudah menyimpan sebuah ide yang menarik untuk Anda tampilkan, mungkin?. Untuk menampilkan apa yang akan Anda tuliskan, saya sudah rangkai kodenya dengan CSS seperti ini:



.flip-container {
   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -o-perspective: 1000;
   perspective: 1000;
   border: 2px solid #39f;}

.flip-container:hover .flipper, 
.flip-container.hover .flipper {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   transform: rotateY(180deg);}

.flip-container, .pic, .back {width: 320px;height: 427px;}
.flipper {
   -webkit-transition: 0.6s;
   -webkit-transform-style: preserve-3d;
   -moz-transition: 0.6s;
   -moz-transform-style: preserve-3d;
   -o-transition: 0.6s;
   -o-transform-style: preserve-3d;
   transition: 0.6s;
   transform-style: preserve-3d;
   position: relative;}

.pic, .back {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -o-backface-visibility: hidden;
   backface-visibility: hidden;
   position: absolute;
   top: 0;left: 0;}

.pic {
   background: url(URL-gambar Anda.jpg) 0 0 no-repeat;
   z-index: 2;}

.back {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   transform: rotateY(180deg);
   background: #f8f8f8;}

.pic .about {
   font-size: 1.4em;
   display: inline-block;
   background: rgba(33, 33, 33, 0.9);
   color: #f8f8f8;
   font-family: Helvetia;
   padding: 5px 10px;
   border-radius: 5px;
   border:2px solid aqua;
   float:right;right:10px;
   bottom:15px;position:absolute;}

.img-logo {
   position: absolute;
   top: 35px;border-radius:50%;
   left: 90px;width: 139px;height: 139px;
   background: url(URL-gambar Anda.png) 50% 50% no-repeat;}

.back-desc {
   font-weight: bold;
   position: absolute;
   top: 200px;text-align: center;
   left: 0;right: 0;font-size: 25px;
   text-shadow: 0.1em 0.1em 0.05em #C0C0C0;
   font-family: Lato;color: #00304a;
   background: linear-gradient(left, transparent 0%,red 50%,transparent 100%);
   background:-webkit-linear-gradient(left, transparent 0%,red 50%,transparent 100%);
   background:-moz-linear-gradient(left, transparent 0%,red 50%,transparent 100%);
   background:-o-linear-gradient(left, transparent 0%,red 50%,transparent 100%);}

.back p {
   position: absolute;
   bottom: 50px;left: 0;right: 0;
   text-align: center;padding: 0 20px;
   font-family: arial;
   line-height: 2em;color:#333;}


<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
   <div class="flipper">
      <div class="pic">
         <span class="about">
            Devy Indriyani
         </span>
      </div>
           <div class="back">
               <div class="img-logo">
               </div>
    <div class="back-desc">
      SAHABAT BLOGGER 77
    </div>
//Anda bisa tuliskan apa saja disini...
       <p>
         Your Descriptions Text
       </p>
           </div>
   </div>
</div>

Sehingga hasilnya akan jadi seperti ini:




DEMO SHOW




Bagaimana, setelah halaman kosong dibalik gambar di isi dengan sebuah tampilan akan terlihat lebih menarik dari efek sebelumnya bukan? hehe.... Semoga tutorial efek gambar kali ini dapat memberikan keceriaan buat sahabat semua pecinta SAHABAT BLOGGER 77. Salam manis **).

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Gambar Dengan Efek Flip Animasi
Ditulis oleh= Devy Indriyani
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 =

17 komentar

  1. Balasan
    1. mau buat devy penasaran ya..?

      Hapus
    2. [-( [-( , mau disampaiin tp gak enak bisa dibaca pengunjung mba..!,

      Hapus
    3. kalau masih dalam batas yang wajar, kenapa merasa gak enak untuk menyampaikan ide-idenya

      Hapus
    4. (p) bukan ide mba..tp berkaitan dgn demoshownya..!

      Hapus
    5. Beb..!, mohon share tutor kolom komentar..harus secantik mba devy ya ..kolom komentr sy ancur,,.tadi coba beberapa trik tp nda bisa,.mw brtanya ke yg share blom tentu di jawab ..kalau mba kan respeknya cepat,.nda pa2 nunggu minggu depan, mba kan lg sibuk... oiiya skedar promosi..makasi buat model sitemapnya..mantap dah trpasang di menu utama, biasanya sebelum template yg dipake yg skarang nda bisa ke baca..

      kalau kebetulan komentar ini dibaca, mohon dibuka emailnya, sy sampaikan yg berkaitan dgn demoshownya..

      Hapus
    6. requestnya akan segera devy terbitkan, tetapi lumayan lama loh,kan gratis..hehe..!!

      ditunggu saja ya mas, insyaAllah saya kerjakan dengan secepatnya, oh iya mau pakai kolom komentar "Admin" mau pakai label Author atau penulis mas seperti ini.?

      Hapus
    7. b-(, terserah yg pastinya ini hasil karyanya Ivy..! :))

      Hapus
  2. wahhh kereennn nihh gan tutorialnya saya izin Simpan yaa :)

    BalasHapus
    Balasan
    1. tetapi gambar saya jangan di simpan ya..hehe..!!

      Hapus
  3. hhahahhahha mantap flip foto nya :>)

    BalasHapus
  4. dari kemarin praktekinnya ga bisa dev, disimpennya dimana lebih setengah jam malah pening hehe? apalagi yang mengganti gambar saat hoper.. itu cantik pisan

    BalasHapus
    Balasan
    1. Dalam tata letak struktur HTML kode template, letak CSS berada pada tag
      [pre]<b:skin>.....</b:skin> //pada wilayah area <head>

      //atau bisa diletakkan secara langsung pada wilayah HTML, tetapi jangan lupa gunakan tag ini untuk membungkus kode CSS tersebut, seperti ini:

      <style type='text/css'>
      ...
      letakkan kode CSS disini
      ...
      </style>[/pre]

      sekarang coba mbak perhatikan kode yang saya beri warna merah (URL-Gambar Anda.jpg) ganti kode tersebut dengan URL gambar mbak.

      Hapus
  5. CSS di input keman ya? di Template nya atau gmn...thx

    BalasHapus
    Balasan
    1. bisa dimana saja mas, jika meletakkan pada HTML Template, cari kode seperti ini:
      ]]</b:skin>. lalu letakkan CSS diatas tepat diatasnya. (atau sebelum kode tersebut)

      atau bisa langsung pada halaman posting, namun tambahkan tag seperti ini untuk mengapit kode CSS tersebut:

      <style type="text/css">
      ...
      Letakkan kode CSS disini
      ...
      </style>


      selanjutnya letakkan seluruh kode diatas pada halam posting Anda mode tulis HTML seperti ini:

      http://2.bp.blogspot.com/-tTm5JBF4HTs/VP8JR7Ywn7I/AAAAAAAABu8/ninQIP6axys/s1600/formulir%2BHTML.jpg

      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