Tutorial Pemrograman

Cara Menampilkan Gambar Flip Effect dengan CSS

CSS singkatan dari Cascading Style Sheets. CSS adalah salah satu bahasa markup yang berfungsi khusus untuk merancang tampilan pada website agar hasil tampilan website lebih maksimal dan sesuai kebutuhan klien atau perusahaan.

Gambar flip ini diperlukan untuk permainan dengan menebak gambar atau kartu. Atau untuk menampilkan gambar bagian belakang ketika disentuh, diklik, ditekan, disorot, atau digeser pada bagian tersebut baik horizontal, vertikal, maupun berputar.

Sekarang, penulis akan berikan tutorial untuk menampilkan gambar flip effect menggunakan CSS. Sebelum memulai, siapkan 1 gambar bitmap tipenya (jpg, png, bmp, jpeg). Usahakan perbedaan ukuran panjang dan lebar tidak terlalu jauh, agar mudah dimodifikasi dengan CSS.

A. MEMBUAT KERANGKA TAMPILAN GAMBAR FLIP EFFECT DENGAN HTML

1. Silahkan aktifkan teks editor seperti Notepad++, Sublime, Visual Code, dan sebagainya.

2. Silahkan ketik kode script di bawah ini.

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “flipgambar-css.html”.

5. Klik Save.

6. Cari file yang tadi, kemudian klik kanan pada mouse → Open With → Web Browser app (Chrome, Mozilla, atau Microsoft Edge).

Lihat hasilnya.

Apabila di dalam project website gambar flip profil kamu belum ada gambar, silahkan siapkan 1 gambar dulu, kemudian ditaruhkan ke dalam project website kamu, saat sebelum memasuki tahap berikutnya.

B. MEMBUAT GAMBAR FLIP EFFECT DENGAN CSS

1. Klik File → New atau tekan CTRL + N untuk membuat halaman baru pada text editor.

2. Silahkan ketik kode script di bawah ini.

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “style.css”.

5. Klik Save.

C. HUBUNGKAN LINK CSS KE HALAMAN HTML

1. Kembali ke fokus halaman profile.html tadi di text editor.

2. Tambahkan kode script di bawah ini.

3. Kode script ini terletak di bawah tag <title>. Setelah itu tekan CTRL + S lagi.

4. Silahkan tekan F5 pada web browser kamu. Lihat hasilnya.

Tampilan pada saat bagian gambar disorot.

Selesai.

Catatan:

Usahakan ukuran gambar dengan ukuran flip gambar harus sama agar dapat menghasilkan gambar flip secara maksimal. Untuk membuat gambar flip effect, maka menggunakan kode script CSS Transition.

Kode script pada tampilan gambar flip effect.

Pada kode script yang diatas, ada kode script CSS Transition yakni Transform. Transition ini berfungsi untuk memindahkan satu gambar ke gambar yang lain. Kode script Transform bertipe Rotate yang berarti memindahkan satu gambar ke gambar yang lain secara berputar (rotasi).

Transform tipe Rotate ada 3 jenis rotate, yakni

  • rotateX(nilai derajat), memindahkan satu gambar ke gambar yang lain secara berputar vertikal.
  • rotateY(nilai derajat), memindahkan satu gambar ke gambar yang lain secara berputar horizontal.
  • rotateZ(nilai derajat), memindahkan satu gambar ke gambar yang lain secara berputar.

Nilai derajat bisa dinilai antara 0 – 180 derajat. Nilai satuannya deg. Usahakan nilai transform antara bagian gambar semula dengan bagian gambar flip harus sama.

Jika kamu ingin membuat gambar sebagai efek transisi flip, maka kamu tinggal menambahkan kode script di bawah ini.

Letakkan kode script yang diatas di bawah <div class=“back face center”>.

Source Code flipgambar-css.html secara keseluruhan.

Demikian tutorial cara menampilkan gambar flip effect dengan CSS. Selamat mencoba.









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Download Aplikasi Inwepo

Berlangganan tutorial Inwepo melalui email

Copyright © 2018 Inwepo - All Rights Reserved.

To Top