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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>Tutorial Menampilkan Gambar Flip Tanpa Gambar Background dengan CSS</title> </head> <body> <div id="f1_container"> <div id="f1_card" class="shadow"> <div class="front face"> <img src="logo512.png" class="imgimage" /> </div> <div class="back face center"> <p>Tampilan Gambar Flip Tanpa Gambar Background dengan CSS.</p> <p>Tada......</p> </div> </div> </div> </body> </html> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
#f1_container { position: relative; margin: 10px auto; width: 200px; height: 200px; z-index: 1; } #f1_container { perspective: 1000; } #f1_card { width: 100%; height: 100%; transform-style: preserve-3d; transition: all 1.0s linear; } #f1_container:hover #f1_card { transform: rotateX(180deg); box-shadow: -5px 5px 5px #aaa; } .face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } .face.back { display: block; transform: rotateX(180deg); box-sizing: border-box; padding: 10px; color: white; text-align: center; background-color: #43ab67; border-radius: 10px; } .imgimage{ width:200px; height:200px; } |
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.
|
1 |
<link rel="stylesheet" type="text/css" href="style.css"> |
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.
|
1 2 3 4 5 6 7 8 9 10 |
.face.back { display: block; transform: rotateX(180deg); box-sizing: border-box; padding: 10px; color: white; text-align: center; background-color: #43ab67; border-radius: 10px; } |
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.
|
1 |
<img src="nama_gambar_flip" class="imgimage" /> |
Letakkan kode script yang diatas di bawah <div class=“back face center”>.
Source Code flipgambar-css.html secara keseluruhan.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>Tutorial Menampilkan Gambar Flip Tanpa Gambar Background dengan CSS</title> <link href="style.css" type="text/css" rel="stylesheet"/> </head> <body> <div id="f1_container"> <div id="f1_card" class="shadow"> <div class="front face"> <img src="logo512.png" class="imgimage" /> </div> <div class="back face center"> <p>Tampilan Gambar Flip Tanpa Gambar Background dengan CSS.</p> <p>Tada......</p> </div> </div> </div> </body> </html> |
Demikian tutorial cara menampilkan gambar flip effect dengan CSS. Selamat mencoba.
