Apa itu flip..??

Ya,, arti flip sendiri ini jika diterjemahkan ke bahasa indonesia artinya adalah membalik, ini salah satu fitur yang di miliki oleh css dimana sebuah fungsi flip untuk membalikkan content. Biasa nya ini di pakai untuk membuat sebuah animasi 3D dalam penggunaan css, di kesempatan kali ini saya akan memberikan tips dan trik tentang Cara Menggunakan Animasi Flip Pada Text Dengan CSS dan pada studi case ini kita akan menggunakan flip untuk membuat animasi text dimana text akan di animate dari kekiri kekanan kemudian pada tampilan 50% fungsi flip akan di jalankan dan pada saat di flip akan berubah color menjadi orange kemudian akan kembali ke posisi awal dan color berganti color.

Baik, sekarang kita akan mulai untuk belajar membuat sebuah animasi flip. Seperti biasa teman – teman siapkan text editornya dan copy script html nya di bawah ini

Lalu paste pada text editornya dan save dengan nama flip.html, kemudian jalankan pada browser nya. Maka hasilnya seperti gambar di bawah ini

Cara Menggunakan Animasi Flip Pada Text Dengan CSS

Seperti kalian lihat pada gambar di atas ini, text belum mempunyai efek apa – apa karena memang kita belum memberikan fungsinya. Berikutnya kita implementasikan Cara Menggunakan Animasi Flip Pada Text Dengan CSS dengan cara tambahkan style css nya seperti gambar di bawah ini

Cara Menggunakan Animasi Flip Pada Text Dengan CSS

Script pada gambar di atas ini yang akan menjalankan semua perintah flip nya, langkah berikutnya baru kita panggil nama class flip yang juga sudah di atur oleh @keyframes

Cara Menggunakan Animasi Flip Pada Text Dengan CSS

Jika sudah, save dan refresh pada browser nya. Maka fungsi flip sudah berhasil dibuat, atau teman – teman juga bisa melihat hasilnya dengan klik link ini.

Bagaimana,,?? Sangat mudah bukan,,?

Oke, sekian dulu pada artikel kali ini tentang Cara Menggunakan Animasi Flip Pada Text Dengan CSS. Kita berjumpa kembali pada tips dan trik berikutnya yang juga akan membahas seputar dunia website, kunjungi juga tips dan trik lainnya di website ini supaya makin banyak refrensi untuk teman – teman yang lagi upgrade skill nya di dunia website.

Terima Kasih dan Sampai Jumpa, Semoga bermanfaat 🙂