Membuat Gambar Dengan Efek Flip Animasi

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;}

• CSS
• HTML
• ► Live DEMO

.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfWJSgSHHpi5J6p6skI34q-Es8Az5tN0vYvfyIPuxnLNiwDru-K48va1qfO3ax8azytboB-DJlAjkv7lUICr3HfioiXOAzJTeXfDA1YPowAi8o-r_IaffMbOqVn8W42122tE0GSRVmZRI/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 **).